No Such Thing As A Blank Slate

Let’s say you’ve built an HTML document, but you haven’t defined any CSS rules or linked it to any style sheets yet. When you view this document in a browser, it’ll be totally unstyled, right?

Wrong. Each user agent — that is, a web browser — applies a default style sheet to HTML documents. Why? Because the W3C’s various CSS specifications say they must:

CSS1 Recommendation

Each User Agent (UA, often a “web browser” or “web client”) will have a default style sheet that presents documents in a reasonable—but arguably mundane—manner.

CSS2.1 Recommendation

Conforming user agents must apply a default style sheet (or behave as if they did). A user agent’s default style sheet should present the elements of the document language in ways that satisfy general presentation expectations for the document language (e.g., for visual browsers, the EM element in HTML is presented using an italic font).

CSS3 Working Draft

Conforming user agents must apply a “default style sheet” (or behave as if they did) prior to all other style sheets for a document. A user agent’s default style sheet should present the elements of the document language in ways that satisfy general presentation expectations for the document language (e.g., for visual browsers, the EM element in HTML is presented using an italic font).

So far, so good. But here comes the monkey wrench.

No Such Thing As A Consistent Slate, Either

While the W3C says that user agents must apply a default style sheet, and give several examples of good default style sheets (CSS 1, CSS 2.1), there is no mechanism for forcing each user agent to use the same default style sheet. Unsurprisingly, this means that virtually every user agent has its own different default style sheet.

Jens Meiert has cataloged a whole bunch of default style sheets on his blog. I’d recommend looking through them to see how the various browser makers have decided to skin this particular cat.

The upshot of all this is that when you start to write CSS for your HTML document, you’re going to have to spend lots of time and effort compensating for the differences in the various UA stylesheets your site’s visitors are likely to be using. Eric Meyer goes into this in further detail (the first four paragraphs), but in a nutshell, this is as much fun as a root canal:

The basic reason is that all browsers have presentation defaults, but no browsers have the same defaults. (Okay, no two browser families—most Gecko-based browsers do have the same defaults.) For example, some browsers indent unordered and ordered lists with left margins, whereas others use left padding. In past years, we tackled these inconsistencies on a case-by-case basis; for example, making sure to always set both left padding and left margin on lists.

But there are all kinds of inconsistencies, some more subtle than others. Headings have slightly different top and bottom margins, indentation distances are different, and so on. Even something as basic as the default line height varies from one browser to another—which can have profound effects on element heights, vertical alignments, and overall feel.

CSS Resets: Consistency! Hooray!

The tactic of using a “reset stylesheet” was first publicized by Eric Meyer at a conference in 2007, but had been in use by others (notably, Yahoo!‘s YUI team) even before then. The idea: before writing your site-specific styles, you drop in a stylesheet that normalizes, or resets, many of the default styles applied by the UA‘s. In theory, applying the reset stylesheet gives you the blank slate you wanted.

...Or Not

As Yogi Berra once said:

 

In theory there is no difference between theory and practice. But, in practice, there is.

Stay tuned for Part 2 of this post, where I’ll discuss some of the drawbacks of using CSS Resets.