The beauty of CSS

Still sick… with congested head, lots of coughing and sneezing, the runny nose, the exhaustion… and here I thought we would be exercising and doing lots of activities now that Hoyt is here again. Blah. But what I really want to mention is CSS. People keep questioning me why CSS is better. Better than what? The old way. Let me make a few points.

CSS stands for Cascading Style Sheets. What this really means is it styles an HTML page (or (X)HTML elements).
CSS is not supported consistently across browsers. IE happens to fudge it up the most, giving me serious heart burn on site design. Good challenge though.
CSS is still a fledgling when it comes to layout (but is spectacular at basic styling of fonts, etc). You can do it, but it isn't as easy as it should be. This is being worked on with version 3.0 (it's currently at 2.1).

What many people do is transitional. They'll still use a table to make basic layout, but then integrate groovy XHTML and solid styling CSS (not the messy layout stuff). This is a great start, especially for people who don't want to muddle with all the crap between browsers (stupid IE…).

But why? Why bother? Take my motto. Life is change. And it be changing uber fast right now. Build with CSS, and you've got a lot more flexibility. It's similar to what happened in the Alps many years ago. The people built a railroad without having a train because they knew someday it would come. They paved the road. And the train came. CSS may not be the best thing ever invented yet, but it'll come. 😉

My main reason for using CSS is it separates content and presentation. HTML provides a basic document structure for content. CSS provides styles for the content. If I had it my way, I would break it down even further by having my content in XML, so it could be built using meaningful tags (XML provides rules but you get to make your own tags/elements, so instead of coding <h1>Huckleberry Finn</h1>, which could be your name or the name of a book, etc., XML allows you to put <booktitle>Huckleberry Finn</booktitle>, which clearly labels what that content is). Then from XML, we use XSL (XML Stylesheet) to tell it what HTML it is (<booktitle> is equal to <h1>) so our browsers understand how to display it in a document. Then we apply CSS to make the title purple, centered, and 14px tall. It's all about separating out content and style, making it easier to manipulate and change (remember, change is super fast right now).

An example: people don't tend to buy appliances that are combined. Take the microwave with toaster.

This is pretty neat. Saves on space and two for the price of one, right? What if you decide you need a four slice toaster…? You have to dump the whole unit and either find one that has four or buy them separately. Or what if the toaster broke? The whole unit goes in for repair (and you never know, fixing the toaster might break the microwave and back it goes…) or you dump it for a new one. Typically when they're together quality decreases as well. Because the manufacturer is not focused on making one technology work, but two in the same container, quality is compromised. It's just better to have two separate ones. Or a toaster oven.

In any case, separating them out make them easier to change. Then you're also using technology that was designed for that specific purpose. Sure, for those not ready to make that leap, using a transitional design isn't bad, but make sure you build it knowing the train will come someday.

LiveJournal apparently has issues with the <code> tag to which end I had to revise this post about three times. Looking forward to moving…