 |
 |
 |
Ham Journalism |
|
|
|
|||||
|
|||||
|
|
CSS Koolaid For Newbies So you think you consider yourself a good web designer, eh? You've probably mastered the intricacies of slicing up images and reassembling them into a table. You know that if you want the table cells to line up, you need your <td> tags all to be on the same line, and cellspacing="0" is your friend. You can visualize complex table layouts that expand to the full size of a browser. Sometimes you get so tricky as to nest multiple tables for even more layout flexibility. Life is grand, you're the master of your little web design domain. What's left to do? Forget everything you know about page layout. For years, designers have held the table-based layout on the highest pedestal, and with good reason. It's easy to add cells to tables, it's easy to control how they bend and stretch and look. But that's not what their intended use was for. Tables in HTML were originally designed for displaying data - numbers and such - not slicing up images and laying out a page. Compared to a pure CSS layout, that 5-level-deep liquid table layout you designed last week renders with all the speed of an OJ Simpson chase. "But CSS won't render correctly," you say, "People are still using Netscape 3!" Screw them. And here's why. CSS gives web developers a new holy grail. Separation of style and content. Form vs. Function. It allows designers better control over how things on their page are displayed. Now, instead of guessing that your table will appear in the upper left corner, you can tell the browser to position the upper-left corner of your box at the top left of the screen (0,0). You can tell the browser that all <h1> tags should be 24-pixel-tall yellow Impact. Then you can tell the browser that you want all of the text in your paragraphs to be 10-pixel-tall Verdana and have a specific kerning and tracking. <font> tags never gave you that, did they? The real brain geyser here is that once you decide that you need to change all your <h1>'s to something else, all you have to do is edit the definition, which would look something like this: h1 { font-family: Impact; font-size: 24px; color: black; }
Into something like this: h1 { font-family: verdana, arial, helvetica, sans-serif; font-size: 10px; color: yellow; }
Voila! And now you just changed all of the <h1> tags in your document at the same time. No more editing font tags. No more search and replace. Happy happy happy, joy joy joy. On top of that, your pages will load a ton faster because you don't have <font> tags wherever you want markup. So why are tables so crappy? Many browsers, if not all, wait for the final </table> tag before rendering the page. Get a person on a 56k modem, and you'll have someone waiting for their browser to load images and then get that final closing tag. When you drink from the sweet goodness that is CSS Kool-Aid, your pages will load faster. They'll render faster. They'll even scroll faster. Your behemoth of a layout with 5-table-deep layouts will suddenly go on a Subway diet and be managable again. No more trying to figure out which table cell to change, no more forgetting to use colspan or rowspan. On top of that, if you structure your document correctly, you can do cool things like this, this, this and this. All by changing the stylesheet that your page loads. Update: I forgot about how those links to manero.org worked. Go to the site, and check out the style links on the left side of the page. You'll notice the only *real* difference is the stylesheet that loads. Another cool thing you can do with CSS is to create a separate ruleset for "printer-friendly" versions of your page, where you can get rid of text coloring, hide images that you might not want to print, or even swap out a version of your logo that prints out better than that crufty old jpeg of a logo you have. All because of the magic of CSS. If you're feeling up to it, you could get your page to conform to XHTML 1.0. Why should your page be validating XML? Well, for one, XML parsers can process it. If you have validating XML, you can do cool stuff like run XSL Transformations on your page. Don't like HTML? Use Cocoon to serve up multiple renderings of your page, like PDF. Yum. So I've sold you on CSS, right? You're going to go home, break out your text editor, and take a long hard look at all those nested, pain-in-the-ass-to-maintain tables. You're going to figure out what the repeating elements of your site are, mark them up in CSS, and make your page load faster. "But Tony," You say, "I don't even know CSS! Where am I ever going to learn it?" Look no further, my friend, because I've compiled a nice big list of resources to get you weaned off the set of old underwear that is table-based layouts. So take off those grungy briefs and put on a nice warm pair of flannel boxers. Now that I'm comparing underwear to CSS, I'll end the article here for now and hook you up: CSS Goodies:
Comments? Questions? Suggestions? Flames? Contact Tony. |
