If you can follow this page OK, you’ll find basic stylesheets easy. I’ll assume that you know a bit about the following three selector types:

For that simple layout, we want four elements. A HEADER, a SIDEBAR, a CONTENT BOX and a FOOTER. The idea behind these is that you put a title or date etc in the ‘header’ element, your navigation/links or advertisements in the sidebar, surprise surprise, your content will go in ‘the content box’, and copyright/contact information should go in the footer. I say “SIDEBAR” rather than “LEFT-HAND-SIDE-BAR” for a couple of reasons. Using CSS it is very easy to put the bar on either side, but also, the right-hand side is where the links will go. On most browsers, the scrollbar is also on the right hand side. Links will be closer to the pointer. In English-speaking cultures, people read from left to right. A left-hand-side-bar would be distracting as people scan through text, and can pull the eyes away from the content. The solution? Make your sidebar a right-hand-side-bar.

Building your own basic layouts

Back to these four main elements, you need to decide a couple of things before you start making your stylesheet. You need to choose:

• (SPACING) – the spacing between the components of the page,
• (TOTAL WIDTH) – the overall width of the layout,
• (SIDEBAR WIDTH) – the width of your left and/or right columns,
• (BROWSER INTEROPERABILITY) – whether you’re lazy and ignorant of non-IE browsers, or acute and catering for all browsers.

If I start with the most basic stylesheet, it’d go something like this:

#header {
    margin: 0;
    padding: 0;
    margin-bottom: 4px;
}

#sidebar {
    margin: 0;
    padding: 0;
    float: left;
    width: 160px;
    width: 164px;
    width: 160px;
}

#content {
    padding: 0;
    margin: 0;
    margin-left: 168px
}

#footer {
    clear: both;
    margin: 0;
    padding: 0;
    margin-top: 4px;
}

If I added borders and a background to that so you could see it, it would end up looking something like this: barebones.htm. Depending on your interest/fascination level with the thinking behind CSS, you may find that really amazing and start utilizing similar techniques immediately. If, for instance, you wanted to create a stylesheet similar to that, here is where the numbers come in. I have substituted certain values in the stylesheet for the references I made in caps in that just above the last code box.

#header {
    margin: 0;
    padding: 0;
    margin-bottom: (SPACING);
}

#sidebar {
    margin: 0;
    padding: 0;
    float: left;
    width: (SIDEBAR WIDTH);
    width: (SIDEBAR WIDTH + SPACING); [BROWSER INTEROPERABILITY]
    width: (SIDEBAR WIDTH); [BROWSER INTEROPERABILITY]
}

#content {
    padding: 0;
    margin: 0;
    margin-left: (SIDEBAR WIDTH + SPACING + SPACING);
}

#footer {
    clear: both;
    margin: 0;
    padding: 0;
    margin-top: (SPACING);
}

If you’re not fussed about cross-browser compatibility you can omit the lines which use my backslash trick. (These lines are marked with [BROWSER INTEROPERABILITY]). More about those lines will be below. If you don’t want the TOTAL WIDTH to be the full page width, you will need to enclose the whole page in a container and set the width of that. This simple layout works fairly well over most browsers. It isn’t pixel perfect, and no layout really is these days thanks to Microsoft’s Internet Explorer. Make sure that in the content’s margin-left: declaration you specify TWICE your chosen SPACING.

Browser interoperability

I discovered by accident that when there is a backslash in a CSS declaration, some funky things happen. Some browsers parse the backslash as part of the declaration, and seeing as it isn’t valid, ignore that whole line (or at least, everything until the following semicolon). Other browsers omit the backslash from the declaration, turning the line into a regular attribute: value;. Some even funkier results involve the browser correcting the first line with a backslash in it (in that class/id), but then ignoring any lines that follow with backslashes. This is evident with IE5 and IE5.5 which seem to prematurely close the attribute after the first line with the backslash. This can be incredibly useful.

IE5 and IE5.5 are well known to have problems with the CSS 1 specification and the box model etc. This little bug can be used as an alternative Owen Briggs’ ‘voice-family: inherit;’ hack (which is actually rather good, aside from the dodgy-looking markup). The whole purpose in using the backslash bug is to get IE5 and IE5.5 (not IE6, because that fixed the glitches with the box model) to display a different width from the rest of the browsers. This causes the page to appear right, even though the browser is seeing the wrong numbers.

Experiment with the ‘bare bones’ page. There is a whole lot you can do with that little layout, although don’t abuse the hell out of it – I created that! For people who know a bit of CSS, that pretty much concludes this short-lived tutorial on some of the advantages/disadvantegs of stylesheet-driven layouts over tables. If you’re completely new to CSS, most of this probably went straight over your head. I suggest the w3schools CSS introduction as a good place to start learning.

1. The evils of tabular layouts
2. The benefits of stylesheet layouts
3. Making robust stylesheets yourself