Impossible tri-bar

Digital Phenomena - Your first stop for internet consultancy 
Site Building


Lesson 1

Lesson 2
1  Site Optimization Tutorial — Lesson 2
2 Tables: Past Performance, Future Returns
3 Bring it to the Table
4 Better Structure, Faster Page
5  CSS: An Overview for Optimizers
6 Code Size

Lesson 3

Lesson 4

Site Optimization Tutorial
Lesson 2

by Jason Cook

Page 5 — CSS: An Overview for Optimizers

Tired of tables yet? (You're free to shout 'Hellzyeeeaahh, G!', without impinging the previous portion of this humble Web development narrative.) After all, debugging cross-browser table display issues, or parsing content buried under a mishmash of <TD>s, <TR>s and <font> tags gets old, fast.

Hence the hooplah over CSS.

Cascading Style Sheets is a smart standard, promising precise control over the looks and the layout of websites. Idyllic stuff, indeed, for jaded Web workers. Well, CSS isn't quite Utopia, yet — cross-browser snags and snafus still exist. But it's a solid leap ahead, especially if you're keen on creating speedy Web sites.

We'll refrain from re-hashing the many treatises on why separating content from markup code is the bee's knees (i.e. here, here, and here), but we will repeat this much: It is far easier to redesign or repurpose Web content that has been built as such using technologies like CSS, XML, and XHTML. This matters for us speed freaks (in the positive, HTML-optimization sense), because serving different versions of a site is a serious consideration. "Optimized" is relative term for broadband users and mobile phone surfers, for example, and one page format is unlikely to satisfy both audiences. Once you've separated the content from a page's architecture, you can publish to multiple formats or designs without doubling or tripling your workload.

Great resources for getting familiarized with CSS (a.k.a stealing code snippets) include Mulder's Stylesheets Tutorial right here on Webmonkey, as well as,, and Jeffrey Zeldman's musings on the topic. To see a kick-ass example of a commercial site that pioneered Web-standards-compliant code, look no further than Webmonkey's sister-site Wired News, which uses CSS absolute and relative positioning for almost all of its layout concerns.

Like we said, though, this tutorial focuses on optimization — why CSS layout is faster than table layout, and how to make it seem faster still.

next page»

|Home|About Us|Services|Search|
W3C validatedW3C validated CSSCompatible with all browsers