The Joy of CSS

By Terence J. Grant, July 21, 2004

Whenever I was given the task to design, redesign, or update a website, it was usually a painful, lengthy process. Painful because the idea of delivering content and creativity over roughly laid technology was akin to trying to deliver analog over digital back before MP3. It was like trying to give people circles using only triangles- it just didn't feel right and you could see the seams if you looked close enough. Suspending disbelief was pretty hard to do.

In the past, various options would have been considered for how to merge content and design. Those with experience knew that tables were God's gift to HTML and those new to the field soon learned this fact. Though this made HTML easier to work with in the eyes of those who had to deal with it, it still took lots of time and energy, and once you were finished it wasn't that easy to just change everything, let alone a little thing.

Later came this idea of making templates for websites. Whether it was implemented ahead of time via good old “cut and paste,” server side via simple server-side includes or implemented in PHP, ASP, JSP, or whatever. The idea was to create cookie cutter designs to fit around your content. This was, and still is for the most part, a good thing.

However, in most cases, you still have to spend a good half hour or more inserting content between different include tags. Given that most of the time the top and bottom halves of your template separated a table with who knows how many rows and columns, it could still become a nightmare to update the site. This is especially true to those who had server-side support; and throw caution to the wind if anyone outside of your team touches it.

CSS, like some reformed juvenile, has a troubled past. And really it isn't CSS's fault; it was its upbringing. CSS has always had this stigma of being some kind of flaky language where you break all the rules and run wild with all sorts of fonts you don't have (and probably never even heard of). Worse yet, you have at least three different browsers implementing different parts of it in different ways. Not that this was anything particularly new, but it was a whole new ball game as CSS was supposed to replace the tables of yesterday.

But I try to be an optimist. After all, the technologies of yesterday inevitably change. Sometimes they go away; sometimes they evolve. So I decided it was time to see if CSS had evolved–and was I ever in for a surprise.

It came as a shock to me that one can design an entire, professional looking website, without having used one table tag. I became inspired and a simple search landed me on W3Schools.com, where they have an entire section devoted to CSS, with examples. Within a half day I had not only redesigned my entire website with CSS, but now I could swap out the design in a snap and make any page printer-friendly on the fly–and all on the client side.

So, what does CSS really do, anyway? Well, it does what web designers have needed all along. It provides an easy way to separate design and content, without having to rely on a server or a script to do it for you.

In CSS you set up different styles for different tags and you can divide the styles of the tags into their own sections. There is a small learning curve, but it's well worth it.

Without getting too detailed, here's the punch line: you end up writing pages as though you've just learned HTML yesterday and yet your sites look like you wrote the book on it. It's sweeter than sugar and half the carbohydrates. It's so simple that I invite you to look at any page's source on this site. The best example is a live one, after all.

Now you'll notice there is still some repetition between the pages and things that might be subject to change are of course, subject to change. The menu is the best example of this. So while it's not 100 percent perfect, it's about as close to heaven as you can get.

Who would have thought that the best way to separate style and content was to separate style and content?