why?

Don't tables do a good job of presenting layout? Yes they do but if you want to change a layout you have to change every file. We can change the layout on this site by changing only 1 file. Check the text size in the utility bar. You have the standard layout, a layour for larger print sizes ply a plain vanilla text only version. There is only one version of this file not three separate versions.

set up the layout...

The bare bones
/*style.css*/
body{}
#header{}
#navbar{}
#sidebar{}
#content{}
#footer{}

Crank up your favourite web editor, roll up your sleeves and let's get going..

Let's start by setting up the areas of the template we want. At the top is the header. This contains the logo and the graphics at the top. Below that is the navigation bar. Just below that is the utility bar. This is where we have put the links to change the text size. Below this comes the web page content. I've divided this up into 2 sections, the sidebar for any headlines or secondary links and the main content. Finally at the bottom is the footer.

Now, it's time to start to put some meat on the bones. We are aiming for a layout similar to the picture above.

We will start by setting the attributes for the page. This is done by setting up the body tag. We will start with a page containing black text on white background that takes up the whole of a browser window. Look at the comments in the example below to see what each part does.

We will now divide the page up into 5 sections. The first section is the header. This will contain the logo and banner. We want this to take up the whole width of the window. As for colouring, we will go for a grey backgound with white text.

#header{
width: 100%; /* sets the width to the whole browser window */
clear: both; /*forces the next element to go below */
background-color: #999999; /*sets the background colour to grey */
color: #ffffff; /* text colour is set to white */
height: 80px; /*the height of the box is 80 pixels */
}

The next element is the navigation bar. This contains the links that allow the user to navigate around the site.

#navbar{
width: 100%; /* sets the width to the whole browser window */
clear: both; /*forces the next element to go below */
background-color: #000000; /*sets the background colour to a black */
color: #ffffff; /* text colour is set to white */
}

Now we get to the content part of the site. The content is divieded up into 2 sections, a sidebar and the actual content. These parts sit side by side.

#sidebar{
width: 200px; /* sets the width of the box to 200 pixels */
float: left; /*The box is floated on the left hand side, allowing other boxes to be positioned next to it. */
background-color: #EEEEEE; /*sets the background colour to a light grey */
color: #000000; /* text colour is set to black*/
border-right: 1px solid #CCCCCC; /*sets a border on the right hand side of the element that is 1 pixel wide and coloured grey*/
}

We now have the main content. We want it to sit a bit to the right to allow space for the sidebar to be displayed.

#content{
background-color: #FFFFFF; /* sets the background colour to white */
color: #000000; /* text colour is set to black*/
margin-left: 210px; /*the box will start at 210 pixels to the right of the left hand side. This allows the sidebar to be displayed to the left. */
}

Finally, the footer sits at the bottom of the page

#footer{
clear:both; /*nothing wraps around */
background-color: #999999; /*grey */
color: #FFFFFF; /*white */
}

see it in action...

formatting some text...

You will notice a problem. You can't see the links in the navigation bar very well. Blue on black doesn't provide enough contrast. Let's make some buttons....

CSS allows us to create buttons by setting a border and a background colour. We can redefine how various tags are displayed. We could set the stylesheet to display the links as white. This may work a treat on the navigation bar, but what about having white links in the rest of the document ? CSS provides a solution... contextual elements. We can define normal links and also how links are displayed inside a particular element.

Let's set up normal links. We will make the text links blue and turn red whenever the mouse hovers over them.

a {
color: #0000FF; /* set the text colour to blue */
text-decoration: underline; /* the link is underlined*/
}

a:hover {
color: #FF0000; /* set the text colour to red */
text-decoration: underline;
}

This takes care of all links in the document but we still have the same problem with the navigation bar links. We get around this with contextual links.

Notice that there are 2 elements in the declaration. We have #navbar which has been previously defined. Next to it is an a element. The combination of #navbar a in the declaration tells the browser to apply this attribute when there is an <a> tag inside a #navbar area.

#navbar a {
color:#FFFF33; /*yellow */
text-decoration: none; /*no underline */
background-color: #333399; /*navy */
padding-left: 2px;
padding-right:2px;
margin-left:2px;
margin-right:2px;
border-left: 1px solid #CCCCCC;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
font-family: Verdana, Arial, Helvetica, sans-serif; /*change the font */
font-weight: bold; /*make thse links bold */
}

#navbar a:hover {
color:#FFFFFF; /*white */
text-decoration: none;
background-color: #666666; /*dark grey */
}

see it in action...

summary

That's a very basic introduction to using style sheets for layout.

links

• Introduction to CSS Layout (apple.com)
• CSS Layout Techniques: for Fun and Profit (glish.com)
• The Layout Reservoir (bluerobot.com)
• Cascading Style Sheets(htmlhelp.com)