Building a template file:

Jorge Blanco
Webmaster

Other articles written by this author

Related Articles

+ Build your own website from scratch
+ Define a site in Macromedia Dreamweaver MX

Related Links

Little Boxes
W3Schools HTML
W3Schools CSS

Building a template file.
By Jorge Blanco

STEP 6: CSS Styles PART II

If you tried the code above right away, you would have surely seen that it doesn't look pretty, why? Because it lacks the formatting. So we need to add some extra code in the <style> section so that it looks better.

Next some CSS styling is needed to fix some colors and to add some classes for proper formatting.

<style type="text/css">
#surround_div{
position: absolute;
top: 0px;
left: 0px;
}

#banner{
margin: 5px;
width: 750px;
display: inline;
}

#columns{
margin: 5px;
margin-top: 0px;
margin-bottom 0px;
width: 750px;
clear: both;
}

#left{
background-color:#E6E6FF;
border: solid #505096 1px;
width: 120px;
float: left;
}

#content{
background-color: #FFFFFF;
border: dashed #505096 1px;
margin: 0px 5px;
float: left;
width: 500px;
padding: 5px;
}

#right{
background-color: #505096;
border: solid #505096 1px;
width: 120px;
float: right;
color: #FFFFFF;
}

#footer{
margin: 5px;
background-color: #FFFFFF;
border: solid #505096 1px;
clear: both;
}

.title{
font: bold 1.8em Arial;
}

.subtitle{
font: bold 1.3em Arial;
}

.monospace{
font: normal 1.0em "Courier New";
}

.gray {
color: #AAAAAA;
}

.tiny{
font: 0.55em Arial;
}

p{
font: normal 1.0em Arial;
color: #1E1E64;
}
</style>

What happened above was that I fixed some colors in the layers, added some classes for formatting (title, subtitle, monospace, gray and tiny) and stated the default style for any paragraph (the <p> tag).

STEP 6.1: CSS Style Sheets, the *.CSS files

You can now save the CSS in a separate file and link it in the page, just copy the above code without the <style> tags into a new file and save it as styles.css (you can change styles for whatever name you see fit) and then erase the whole code shown above from your template file and write this instead:

<link href="styles.css" rel="stylesheet" type="text/css">

The step above is optional and has no effect on the output; it only saves some space by linking to the file instead of having it on every page. It also makes the updates easier since you now have to edit just one *.css file instead of each page.

<Previous Index Next>