Simon Willison’s Weblog

CSS Tutorial: feedback so far

23rd May 2003

My CSS tutorial series has been getting some fantastic feedback, both in this blog’s comments system and elsewhere. This entry will summarise the most useful feedback, acting as a kind of errata to the previous entries. Thanks to everyone who commented, there are too many to credit individually but you can see most of the points in their original format by browsing the comments attached to each entry.

The anatomy of a stylesheet

1. In one of the examples I specified a color property without a background-color property. This causes a warning when run through the CSS validator, because it may lead to unreadable text if the user has configured their browser’s user stylesheet in such a way that your applied colour becomes unreadable.
2. I failed to cover the Universal Selector. This is an * in place of the element selector, and means “any element”. In fact, .classname and #idname are actually shorthands for *.classname and *#idname.
3. A couple of terminology points: “internal stylesheets” are better known as “embedded stylesheets” and the “descendant selector” is really called the “descendant combinator”.
4. div#main a:link is preferable to div#main a for selecting all links inside a specific div, as it will match only hyperlinks while div#main a would match <a name="anchor"> points as well.

Scripting.com, with added CSS

This entry drew the greatest criticism for its extensive use of the Fahrner Image Replacement technique, which can cause accessibility problems and also has some browser compatibility problems. In particular, the purple permalink icons were not showing up in IE5/Mac, probably because the technique was being applied to an inline rather than a block-level element. I have prepared two alternative examples of the Scripting.com remake, one using a permalink image and one that uses CSS to style the ’#’ sign to appear small and purple: Scripting.com with inline image permalinks, Scripting.com with styled purple hashes.

Defeating IE5 CSS bugs with the help of jwz

1. Owen Brigg’s Sane CSS text sizes was suggested as a useful text sizing tutorial.
2. Vincent Flanders commented that the teaching style of the course sacrificed instant availability of code for extensive explanations, when most people would probably just like to grab the code and run. The reason I’m explaining everything as I go along is that the hey to using CSS in a practical manner is to understand its limitations and the subtle browser bugs demonstrated by some modern browsers. Just providing code may teach people basic CSS faster, but the moment they try their site in IE5 they’ll be stumped by the weird side effects. By explaining each workaround as and when I use it I hope to make the unpleasant surprises a bit less unpleasant.
3. Leonard Lin (broken permalink, try the front page) commented that this article essentially proved jwz right in that “CSS is too fuckin’ hard”. He’s got a fair point, but I believe that for more people to successfully adopt CSS they need to be fully exposed to it, warts and all. The jwz example shows off CSS at its worst, but despite the hacks the result is still smaller, more structural and more maintainable than the original. Designs without centered blocks or using a font other than verdana would have avoided the hacks entirely.

Quick tip: Styling blockquotes with CSS

Most of the comments here involved alternative ways of applying the selectors, all of which are worth reading about but none of which are practical due to poor browser support. I recommend reading them anyway, as they give a good indication of how much cleaner CSS will be once Microsoft get their act together.