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 glish.com, bluerobot.com, 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
