CSS precedence rules

Question

My understanding is that there are 3 types of stylesheet:

• Defined by the page author
• Defined by the user (i.e. a set of default styles defined by the user and installed into their browser)
• Default stylesheet defined by the browser

According to this book if an element is not matched by a selector in any of these stylesheets, only then will the property value be inherited from parent elements. However, the book also says that a browser's default stylesheet should define a style for all types of elements.

If a browser's stylesheet does define a style for all types of element, and this style has a higher precendence than inheritance, then inherited property values should never be observed. Clearly this is not the case, so what exactly are the correct precedence rules for properties defined in a browser's default stylesheet and those defined for parent elements? (I'm aware that not all CSS properties inherited, but for the sake of this discussion assume I'm referring to a property that is, e.g. color)

Thanks in advance, Don

Answer 1

The browser doesn't define a style for all elements, just certain ones. A simplified internal browser stylesheet might look like this:

a { color: blue; border-bottom: 1px solid blue }
p { margin-bottom: 1em; }
blockquote { margin: 0 5em 1em 5em; }

Take the following snippet of HTML as an example:

<ul>
  <li>
    <span>Blah blah blah.</span>
  </li>
  <li>
    <a href="about:">Foo</a>
  </li>
</ul>

When the browser goes to render the <span> element, it looks looks through all the stylesheets (browser, author, and user) for rules that match and figures out which one is the most important. For this example, the author stylesheet contains a single rule:

ul { color: Green; }

Your browser's internal stylesheet doesn't specify a color value for span, so it walks up the document tree until it finds something that does have a color rule defined, in this case ul.

On the other hand, when the browser renders the <a> element, it doesn't find anything in the user or author stylesheets specifying a color, so it uses the rule found in the browser stylesheet.

The end result: Green text, blue link.

Bonus information: If you're using Firefox, you can view (one of) its internal css files by pasting resource://gre/res/html.css into the address bar. (It seems a direct hyperlink confuses SO's markdown engine)

Answer 2

You're right. There are three sources of stylesheets. First come browser styles, then user (reader) styles, and finally author styles; author styles usually trump user styles. Anything defined in the default stylesheet of the browser will be overridden if a style is defined later in the cascading (in a user or author stylesheet) that affects it. If there is something to be inherited due to a style written by the author then it overrides the default styles, since it was defined later in the cascading.

Go here for more on cascading.