Start to Design Your Web with CSS

Before you start working with CSS-based layouts, just notice that browser all have their own, fairly unique, default styling for the various elements. Sometimes, the browser applying different default styling to your elements. To accomodate and eliminate this possibility, you should use css that could neutralizes a lot of default layouts.

If there’s one thing that characterizes what’s gone awry with the Web, it’s the proliferation of presentation at the expense of structure and content. Note that I don’t say presentation is bad: there’s nothing wrong with having a document look nice. The problem is that current presentation is achieved by perverting the structure with single-pixel GIFs, convoluted tables within tables, and semantically null constructs like the FONT tag. What were we thinking?

We were thinking about our audience, that’s what. After all, if you’re going to put information out there, it may as well look good. We all take pride in our work and want it to look as good as we think it is. Since HTML gave us very little in the way of interesting presentational abilities, we forced it into the channels we wanted to travel. If we’d had good styling to begin with, the corruption of the Web’s underpinnings wouldn’t have been necessary.

That’s why CSS is so important. Finally, not only do we have the ability to describe sophisticated presentation, we can do it in relation to well-structured, uncluttered documents. No more tortured markup! Just clean elements that are attractively rendered through CSS.

That’s the most fundamental — if you like, the most pure — reason to embrace CSS. In reality, this road to minor nerdvana has been blocked by implementation disasters. The earliest browsers to support CSS did so very badly. They gave CSS support its start, admittedly, but the behavior was so unreliable that nobody relied on it. And well they shouldn’t have. The next round of browsers did better, but not really enough to gain widespread support.

Only recently has CSS become a viable component of the designer’s toolbox. With Opera 3.6 and Internet Explorer 5, we saw nearly complete CSS1 support. IE5 for the Macintosh, especially, fulfilled this goal, with complete and correct support for everything in CSS1 except for blinking text (no great loss) and a few minor bugs in the float code. Opera 4 appears to have continued the work of earlier versions into most of CSS2, and Mozilla’s recent builds have contained very good CSS2 support.

So if you’ve been holding out on CSS adoption, it’s time to come in from the cold. Thanks to some impressive efforts on the parts of the big three browser vendors, you can learn to bask in the warmth of CSS without getting burned.

Advantage: You

We’ve already covered the fact that CSS lets you separate presentational information from your document information. Great, wonderful, but why is that such a big deal? The more structurally pure your documents are, the easier it is to convert them into other forms via simple scripts. If you can concentrate simply on the structure, converting to WML or custom document types is a snap. In fact, if you approach document structure intelligently, you don’t even need scripts. You can just serve up the same structure in different media by using different styles.

How about the design side? To quote Tantek Çelik, development lead for Tasman and personal TV technologies at Microsoft, “I use CSS because I want precise control over the presentation of my documents, in a way which can be dynamically altered, yet is expressed in a human readable language.” It’s almost infinitely easier to change the color of table headers, or the size of headings, through CSS than it is in FONT-based HTML. With the usual HTML approach, your presentational information is scattered throughout the document, and it’s usually done in a haphazard way. In CSS, the presentational information is collected in one place, and it’s easy to read and edit.

Even better, of course, is the ability to collect the style information for an entire web site into one file. The editing of that file affects the presentation of the entire site. The power this confers on authors is like nothing we’ve ever had before. Even in dynamically generated sites, editing templates and scripts to change the page’s appearance is a headache. CSS dramatically simplifies that process. As web designer Jeffrey Zeldman has observed, “On a traditional site, updating the look of the site, or correcting for a typographic problem, can take hours, even days; with CSS, it’s a matter of minutes.”

All told, the use of CSS makes your life easier, permits you to reach more audiences, and gives you more power than ever. What’s not to like?