Web standards & CSS layouts (2001–2007) · Web Design Through the Ages

Home
Why CSS?
Pruning
Submit a design

Your boss says tables are how websites are built. Your boss also prints out his email. This page has no layout tables, no <font> tags and no spacer GIFs. Everything you see is decided by one external stylesheet.

01 Why plant in CSS?

Structure goes in the markup; presentation goes in the stylesheet. Keep them apart and a redesign becomes a single file upload, your pages shrink by a third, and screen readers finally hear headings instead of nested <td> soup.

“Markup is a promise about meaning. Style is a suggestion about looks.”
overheard at a web standards meetup, 2004

02 Pruning the markup

Headings are <h1> to <h3>, in order. No more <b><font size="4">.
Navigation is a list, because it is a list.
Lowercase tags, quoted attributes, every element closed. <br /> included.
The logo is real text, swapped for a picture with text-indent.

Hacks every gardener knows by heart

The box model hack: Internet Explorer 5 puts padding inside the width. Feed it one width, then hide the right one behind a parser bug.
The clearfix: Floats escape their parent. A generated :after block with clear: both pulls the parent back around them.
The double-margin float bug: IE6 doubles the margin on a floated box. Add display: inline; nobody else minds.

03 Submit a design

Download the XHTML and the sample CSS. You may change only the stylesheet and your own images. Make it beautiful, make it strange, make it validate. Then send it in.

<div id="sg-page" class="sg__page" data-trait="semantic"> <div id="header"> <h1 id="logo" data-trait="image-replacement"><span>The Semantic Garden</span></h1> <p id="tagline">One document. Many gardens. Plant a stylesheet and watch it grow.</p> </div> <ul id="nav" class="clearfix" data-trait="sliding-doors"> <li class="current"><a href="#sg-page"><span>Home</span></a></li> <li><a href="#sg-why"><span>Why CSS?</span></a></li> <li><a href="#sg-prune"><span>Pruning</span></a></li> <li><a href="#sg-join"><span>Submit a design</span></a></li> </ul> <div id="wrap" class="clearfix" data-trait="floats faux-columns"> <div id="content"> <p class="intro">Your boss says tables are how websites are built. Your boss also prints out his email. This page has <strong>no layout tables</strong>, no <code><font></code> tags and no spacer GIFs. Everything you see is decided by one external stylesheet.</p> <h2 id="sg-why"><span class="num">01</span> Why plant in CSS?</h2> <p>Structure goes in the markup; presentation goes in the stylesheet. Keep them apart and a redesign becomes a single file upload, your pages shrink by a third, and screen readers finally hear headings instead of nested <code><td></code> soup.</p> <blockquote><p>“Markup is a promise about meaning. Style is a suggestion about looks.”</p> <cite>overheard at a web standards meetup, 2004</cite></blockquote> <h2 id="sg-prune"><span class="num">02</span> Pruning the markup</h2> <ul class="checklist"> <li>Headings are <code><h1></code> to <code><h3></code>, in order. No more <code><b><font size="4"></code>.</li> <li>Navigation is a list, because it <em>is</em> a list.</li> <li>Lowercase tags, quoted attributes, every element closed. <code><br /></code> included.</li> <li>The logo is real text, swapped for a picture with <code>text-indent</code>.</li> </ul> <h3>Hacks every gardener knows by heart</h3> <dl class="hacks"> <dt>The box model hack</dt> <dd>Internet Explorer 5 puts padding <em>inside</em> the width. Feed it one width, then hide the right one behind a parser bug.</dd> <dt>The clearfix</dt> <dd>Floats escape their parent. A generated <code>:after</code> block with <code>clear: both</code> pulls the parent back around them.</dd> <dt>The double-margin float bug</dt> <dd>IE6 doubles the margin on a floated box. Add <code>display: inline</code>; nobody else minds.</dd> </dl> <h2 id="sg-join"><span class="num">03</span> Submit a design</h2> <p>Download the XHTML and the sample CSS. You may change <em>only</em> the stylesheet and your own images. Make it beautiful, make it strange, make it validate. Then send it in.</p> </div> <div id="sidebar"> <h3>Select a garden</h3> <ul class="designs"> <li><label for="sgt-a"><b>Wisteria</b> by Hazel Moorcroft</label></li> <li><label for="sgt-b"><b>Raster</b> by Kaj Lindqvist</label></li> <li><label for="sgt-c"><b>Afterhours</b> by DJ Semicolon</label></li> </ul> <h3>Archives</h3> <ul> <li><a href="#sg-page">March 2005</a></li> <li><a href="#sg-page">February 2005</a></li> <li><a href="#sg-page">January 2005</a></li> </ul> <h3>Resources</h3> <ul> <li><a href="#sg-page">View this design's CSS</a></li> <li><a href="#sg-page">Standards FAQ</a></li> <li><a href="#sg-page">Translations</a></li> </ul> </div> </div> <div id="footer" data-trait="badges"> <p class="badges"> <span class="badge"><b>XHTML</b><i>1.0 valid</i></span> <span class="badge"><b>CSS</b><i>valid</i></span> <span class="badge"><b>WCAG</b><i>AA</i></span> <span class="badge"><b>RSS</b><i>2.0</i></span> </p> <p>Last tended 14 March 2005. Best viewed in <em>any</em> browser that respects the standards.</p> </div> </div>

/* Sliding doors: a wide left image on the <a>, a narrow right cap on the <span>. The tab grows with its text; hover slides both sprites up 40px. */ #nav { margin: 0; padding: 0 0 0 1.6em; list-style: none; } #nav li { float: left; margin: 0 3px 0 0; } #nav a { float: left; padding-left: 12px; text-decoration: none; background-repeat: no-repeat; background-position: 0 0; } #nav a span { float: left; display: block; height: 40px; line-height: 42px; padding: 0 16px 0 4px; background-repeat: no-repeat; background-position: 100% 0; } #nav a:hover, #nav a:hover span, #nav a:focus-visible, #nav a:focus-visible span { background-position-y: -40px; } #nav .current a, #nav .current a span { background-position-y: -80px; }

.clearfix:after { content: '.'; display: block; height: 0; clear: both; visibility: hidden; } #wrap { background-repeat: repeat-y; background-position: 70% 0; /* liquid faux columns: the seam sits at 70% */ } #content { float: left; width: 70%; } #sidebar { float: right; width: 30%; }

/* Phark image replacement: real text for robots and screen readers, shoved off-screen; a picture of the text sits in the background. */ #logo { margin: 0; height: 84px; text-indent: -9999px; overflow: hidden; background-repeat: no-repeat; background-position: 0 0; }