Imagine that you build a page using only HTML, with no CSS attached or applied. When you render the page in a browser, how does the program know to display links as blue and underlined, and paragraphs as black? Why is the margin for h1 elements 14pt in IE by default, and 0.67em in Firefox?

The answer to these questions is User Agent stylesheets. UA stylesheets are CSS files built into the browser. Each browser has its own UA file, which it uses to determine how to render every website, unless the browser is explicitly told otherwise.

The way we tell the browser to use the site’s CSS, rather than the UA styles, is by linking or embedding a stylesheet to a page, or by using inline styles. The browser then makes a simple decision:

• If the new styles conflict with the browser’s UA stylesheet rules, the site’s style declaration will be used when rendering the element.
• Anything the site style rules don’t specify will be assumed by the UA stylesheet.

This leads developers to create mammoth reset stylesheets that attempt to set every CSS property to a shared default value; applied to a web page, this effectively wipes out any effect of a UA stylesheet. The designer/developer can then build custom CSS for the site, somewhat assured that browsers will not unexpectedly assume a value for some property they have left unspecified. (You can see the UA CSS for IE, Opera at IEcss.com; reading the UA stylesheet for Firefox is easier: just type resource://gre-resources/html.css into the URL bar)

CSS Resets are not without controversy; as I have discussed, I personally prefer a less heavy-handed approach. For example:

<div style="color: red;">
	<p>This is some text <span>in color.</span>
</div>

The color of the paragraph text, inherited from the parent <div>, will be red. What if we wanted to set the text inside the span to black? There are two choices. The traditional approach is this:

<div style="color: red;">
	<p>This is some text <span style="color: #000;">in color.</span>
</div>

There is also a second option:

<div style="color: red;">
	<p>This is some text <span style="color: initial">in color.</span>
</div>

initial is a value that resets a property back to the default UA style. This can be particularly useful when the style you wish to negate may be, long, complex, or difficult to remember:

div {
	border: 3px dotted green;
}
div.special {
	border: initial;
} 
/* resets the border on divs with a class of “special” to that specified in the UA, i.e. no border; } */

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.