Modern Signal | CSS 101

Posted by David Hammond

Despite the title, this is not an intro to stylesheets. This is, rather, a few pointers for web developers that have worked with stylesheets before, but never really got them, which is not as uncommon as you might think. The concepts behind stylesheets are simple enough, so I think many developers, including myself in the past, figure that they pretty much understand them even though they sometimes have no idea why the code they just wrote works. The fact is, stylesheets are pretty simple, but they are devilishly difficult to troubleshoot, especially if you don't have a few pieces of information and the right tools.

So this is intended to be a list of those pieces of information and tools that a developer needs to demystify the most intricate stylesheets. Keep in mind that this page is a work in progress...

Get the doctype right

First of all, we'll all be happier if we are using a strict doctype that tells the browser to follow CSS standards. If we don't we're starting out on a rocky playing field. This does not mean, necessary, that you have to convert everything to well-formed xhtml. It's perfectly acceptable to use old-fashioned transitional html, as long as you put this at the top of your page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

See here for more info and a list of acceptable doctypes: http://www.alistapart.com/articles/doctype/

Understand the Cascade

Now with the right doctype your styles will cascade properly. What does that mean? Well, now, if you set the font size for the body tag, the font-size will cascade down to all elements beneath it, until it encounters a tag that has a different font-size specified. That's the way it's supposed to work. You should not need to specify the font-size for all of the elements in your document. Doing so only makes your stylesheet more complicated and harder to debug.

But sometimes you want to use stylesheet selectors that are a bit more advanced then a simple element. Something like:

td#leftNav ul.li li {font-size: 10px}

In layman's terms, you want to set the font-size of the second level of list items in a list in the left nav of your page. Simple right? It is until you have other styles that are competing to set the font-size of list items. So the next big thing is to understand the cascade. I.e. how does the browser decide which style to use? Well, it has to do with how specific the selector is and where it is declared. Then there's the "!important" keyword. To get an idea, read through this:
http://www.w3.org/TR/REC-CSS2/cascade.html#cascade

One word: Firebug

Now that you have read the specifications for how the cascade works, you should have no problems troubleshooting your next stylesheet problem, right? Wrong. A complex stylesheet can make knowing the rules only the first step in an arduous process of trial and error, unless you have Firebug. Firebug is probably the best single piece of software for debugging html, css, and javascript ever invented. If you don't have it, get it, and if you aren't using it to its full potential, learn more about it. Need to know how a particular style is being applied to a particular element in a page? Just inspect the element in Firebug and it tells you. See here:
http://www.getfirebug.com/css.html

Browser Compatibility

Okay, so far I've been pretending that all browsers follow the stylesheet rules just as they should. The latest versions of Firefox, IE and Safari (the three browsers worth testing in) are pretty compliant with the standards. If you concentrate on making your stylesheets as simple as possible, that helps. Of course there will be times when special issues will popup in particular browsers. So first make sure the browser supports the particular stylesheet property that you are using. Here's one place to look:
http://www.quirksmode.org/css/contents.html

Then, well, maybe you're back to the old method of trial and error, hacking, and beating your head on the table :-) Perhaps I will use this space in the future to post about common problems and workarounds.