Home » Computers » CSS/HTML Webpage Template Generator

CSS/HTML Webpage Template Generator

Webpage layouts are coded with a combination of CSS (Cascading Style Sheets) and HTML (HyperText Markup Language). If you are proficient in programming, you can write the basic structure of a page by hand. If you are not, or you just want to save time, you can use a template generator that will output the code for a simple header/columns/footer based webpage.

The tool below lets you customize the number and widths of the columns as well as the heights of the header and footer areas. The colors are for demonstration purposes only and can be changed.

CSS/HTML Template Generator

Columns:

2 columns

left column total width:	px
right colmn total width:	px

3 columns

left column total width:	px
middle column total width:	px
right column total width:	px

all dimensions include padding

Top:

nav bar below header

header height:	px
nav bar height:	px

nav bar above header

header height:	px
nav bar height:	px

no nav bar

header height:

Footer:

footer height:

Padding:

interior padding:

CSS can be embedded directly in an HTML document between the <style> and </style> tags, which is then placed between the <head> and </head> tags. However, if you have many of pages on your site, embedding the CSS this way will increase the size of each file more than necessary. To avoid bloated code, place the CSS in an external file with the .css extension and reference it in the head section of your document like this:

If you want to change the padding amounts and background colors in any part of the template, you can freely edit the code after you save it. For help selecting colors, see our HTML Color Picker.