Free2Code
Tutorials » Browse » CSS
Tutorials - CSS over tables; working robust stylesheets - The benefits of stylesheet layouts
This article written by
  OldSite

Member since
  October 11, 2006

Stylesheet layouts are easy to maintain. In most cases with stylesheet layouts,

  • One file is all that needs to be changed to affect your layout.
  • One file can be edited to give your site a completely fresh look.
  • One file controls the appearance of all your pages.

That table on the previous page was awful. Digging through your markup to change something will be a pain. Many experienced web publishers hate having to dig through tables, especially when this markup is their own. If you want to make a change to your layout and didn’t have ASP or PHP available when developing this layout, good luck! You may as well start from scratch.

To control the elements with styles after you used a table, what were you going to do?
table.layout tr td.navigation table tr td.button1 {style}?
Yeah, sure. I reckon it would be far easier to do it with this:
#nav {style}

Personally, I’d prefer using a stylesheet and an id selector. It’s simple:

<html>
<head>
   <title>The alternative to tables; using CSS</title>
   <link href="1337.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
    HEADER
</div>
<div id="navigation">
    NAVIGATION
</div>
<div id="content">
    CONTENT
</div>
<div id="footer">
    FOOTER
</div>
</body>
</html>

About now, most table fans would be saying “You’re kidding, right?”

Well I ain’t!

Here’s a test page to prove it. Go to http://sedocity.free2host.net/csstutorial/testpage.htm and view the source – see for yourself! With this, can you imagine how easy it would be to ‘include’ that as a header? On the next page I’ll describe how that was made.


Continue to Making robust stylesheets yourself »
In this tutorial:
  1. The evils of tabular layouts
  2. The benefits of stylesheet layouts
  3. Making robust stylesheets yourself
icons