User Agent Style Sheets: Basics and Samples

Jens O. Meiert, September 22, 2007 / September 20, 2009.

This entry is filed under Web Development.

CSS budgets for default formatting of documents by the user agent style sheet concept, a cornerstone of the cascade. It means that a web browser, for example, doesn’t just present a line of text when it’s fed with an HTML document that has no styling information attached, but instead serves it using minimal formatting.

Figure: HTML document with Firefox default styling.

Specification

CSS 1 introduces the idea by stating that “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.” CSS 2 says that “conforming user agents must apply a default style sheet (or behave as if they did)” and that “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”; CSS 3 is likely to be of the same mind.

Since the CSS specifications leave it up to implementations whether to use a “real” style sheet for default display or not, it’s not astonishing that you don’t find a default style sheet in every browser’s installation folder. Unlike Microsoft’s Internet Explorer as well as Opera, for example (and as far as I know), Gecko browsers like Firefox and Netscape Navigator (look for “html.css”) but also Konqueror make it rather simple to comprehend their default styling.

Example Files

The following is a list of default style sheets I compiled over recent years (except for the Safari example; thank you, Martin). I just looked for and compared user agent style sheets (.css) from time to time; due to the fact that Firebird, Firefox, and Co. are all based on the same layout engine, they’re also quite similar, if not identical. (I’m working on a more comprehensive list that not only adds release dates but also documents differences.)

For comparison, note the exemplary default style sheets proposed by the W3C in the specifications of CSS 1, CSS 2, and CSS 2.1:

User Agent and Reset Style Sheets

This post hopes to provide a little more insight into user agent style sheets, above all by the real examples. Knowledge of user agent style sheets certainly helps getting a better understanding of CSS as well as certain display “phenomena”.

However, I encourage to use this knowledge for other things than building even more or larger “reset” style sheets. Assuming use of additional style sheets, these “reset” or “undo” style sheets are rarely necessary, and the redundancy created is probably neither wise nor professional. From my experience, the only necessary and at the same time best memorable “reset” is * { margin: 0; padding: 0; }. But, “reset” style sheets are handled in another post, revealing why “reset” style sheets are, er, bad.

Enjoy the most popular posts, probably including:

Comments

On September 22, 2007, 12:15 CEST, Alen said:

Thanks for sharing this. You said it well, it gives us better understanding of css and how/what to do with our own style sheets.
On September 24, 2007, 8:37 CEST, Martin Hassman said:

For Safari/Webkit stylesheets cannot be found in the installation (propably compiled into some library), but they are on the web source tracking system with their history

http://trac.webkit.org/projects/webkit/browser/trunk/WebCore/css/html4.css
http://trac.webkit.org/projects/webkit/browser/trunk/WebCore/css/quirks.css
On September 24, 2007, 11:18 CEST, Jens Meiert said:

Thanks Martin – and this just made me update this post accordingly.
On September 25, 2007, 16:29 CEST, Barney said:

This is a very nice piece, Jens. I’m glad someone can give this little study authoritatively because the recent craze over reset stylesheets, and inherently the notion that browser defaults are bad, is often very misguided: If you are going to respecify everything, there is no need for the extra rule for every element; if you aren’t, you’re far better off with the user/developer’s consideration than nothing.
On September 26, 2007, 9:54 CEST, Daniel said:

I absolutely don’t agree with you. The reset with * {margin: 0; padding: 0; } is the worst method of resetting the browser’s default styles.
Especially when working on form elements it make a lot of problems.

The better reset: Reset Reloaded

Kind regards
Daniel
On September 26, 2007, 10:07 CEST, Jens Meiert said:

Daniel, I even refer to Eric’s post, and the issue itself should better be discussed in a forthcoming post.

However, as an unordered outlook: The margin and padding reset is no real “reset” at all; but comparing it to all the other “undo” stuff it is far more memorable; resets are almost always unnecessary since you’ll overwrite the values of most properties anyway; partially, user-agent default styling makes absolute sense, for example in button styling (standard interaction elements) etc.
On November 12, 2007, 19:50 CET, Lynne said:

Interesting read… I just assumed that if the link to the CSS was broken the browsers would default to plain HTML formatting. However, it certainly makes more sense to have a default css file.
On December 30, 2007, 23:34 CET, Lazar said:

Thanks for this. It’s really useful info! Especially for CSS beginners like me.
On January 7, 2008, 15:53 CET, Anders said:

Interesting read, but I am not able to find out where a textarea’s default font (courier) comes from. Anybody?
On February 14, 2008, 22:22 CET, ty said:

Thanks for an excellent writeup.
So what do you start with as a default then?
I’ve been using a reset of sorts, and am finding some of those defining things I never use in my markup, so that seems redundant to me.
How to be sure borders, margins don’t create problems without resetting them or defining them to be the same despite whatever UA styling could derail a layout?
On February 25, 2008, 11:52 CET, Jens Meiert said:

This post is also available in German.
On September 19, 2008, 10:44 CEST, olivier said:

Thanks for this excellent post.

Jens Meiert