CSS Controlled Web Design - Tables are for sitting at...

By now, most web designers are aware of the many benefits of using CSS (Cascading Style Sheets) to control the formatting and appearance of text elements within their web pages.
Indeed, if applied as outlined in one of my articles from 2006 ( CSS - Weight-Loss for your Code), Cascading Style Sheets can substantially cut down the amount of code needed to present a web page in a polished and professional manner.

What few designers realise however, is that CSS is capable of so much more than just handling a page's text formatting.

If used to its fullest capability, the Style Sheet is capable of controlling just about every aspect of page layout and presentation, even to the extent of replacing a Hyper-Text document's traditional table-based design structure.
Quite aside from saving the web developer a substantial amount of coding time, this approach also cuts down the amount of code needed to display a web page properly to an absolute minimum. So much so that in the recent redesign of one of our web sites, the use of CSS controlled HTML cut the average document size from 24kb to less than 5kb.

The key to designing CSS controlled web pages, rests in the use of DIV Tags and DIV IDs.

For example, a traditional table structure would look something like this:
Please note that angle brackets have been replaced by square brackets to display the following code correctly.

[table width="800" align="center" cellpadding="0" cellspacing="0"]
[tr]
[td width="560" align="left" class="one"][h1]Example Text[/h1][/td]
[td width="240" align="left" class="two"] [img xsrc="images/exampleimage.jpg" width="200" height="100" alt="Example Image"][/td]
[/tr]
[/table]

With CSS control, exactly the same look and feel can be achieved by the following two DIV Tags:

[div id="content"][h1]Example Text[/h1][/div]
[div id="image"][img xsrc="images/exampleimage.jpg" width="200" height="100" alt="Example Image"] [/div]

The DIV ID passes control of layout and appearance to the CSS, which handles it as follows:

#content {
position:absolute;
width: 560px;
height: 100px;
;top: 10px;
left: 100px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #000000;
background-color: #FFFFFF;
}

#image {
position:absolute;
width: 240px;
height: 100px;
top: 10px;
left: 660px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #000000;
background-color: #FFFFFF;
}

On the face of it, it may seem like this entails some extra work on the designer's part, but don't forget that at the same time as controlling the DIV Tag's position and appearance, the CSS also handles all text formatting, and that the above Style Sheet will only need to be written once in order to control an entire web site.
Then of course there is the fact that the above example is an immensely simple one. Imagine for a moment, the sheer amount of code which is saved by using CSS over the course of writing an in-depth web page.

The end result is an HTML document which has been stripped of all unnecessary code and is consequently extremely 'light-weight' and easily indexed by search engines.

Additionally, it is also possible to radically alter a page's appearance at the click of a button without ever changing any of its HTML code. This approach is very capably demonstrated at the CSS Zen Garden, where more information about the power of CSS controlled web design can be found.

Furthermore, like HTML, CSS is undergoing constant revisions and will doubtlessly grow to play an even more important part in web design during years to come. Therefore, now may be a good time to further acquaint yourself with the full functionality of this essential web design element.