CSS precedence rules

Question

Hi,

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

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.

Answer 2

Ignoring inline styles which overrule everything, if multiple classes/selectors are applicable to a page element, the one defined last wins (since browser styles are defined first, they are usually overwritten). The caveat comes when there is a class/selector that drills down through all the levels of hierarchy.

Here is an example sheet:

    <style type="text/css">
        #content
        {
            width: auto;
        }

        #content DIV.special
        {
            width: 200px;
            background: #999999;
            border: 2px dotted #000000;
        }

        #content DIV
        {
             width: 300px;
             border: 1px solid #CCCCCC;
        }



    </style>

Given the following HTML:

     <div id="content">
         <div class="special">
             should render 200px wide with a gray background and a dotted border
         </div>
         <div>
            should render 300px wide with a 1pt border
         </div>
     </div>

Then, if you add this style to the bottom of the sheet:

    DIV
    {
        background: #CC9999;
    }

You will turn everything a light purple (since it is the last DIV with a color value) except for the div with the .special class (because it is more specific).

Hope that helps.

Answer 3

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 4

Inheritance of styles of elements from their parents can come about two ways. First, while browsers may define style properties for each element, they typically do not do so exhaustively. So for example, the "p" element usually has a default top-margin (among others), but does not define a font-style so that, in the absence of author or user rules, will be inherited from its parent. Second, one can in some places in CSS use an explicit value of "inherit" to instruct the renderer to adopt that style property from its parent. This used to be necessary in places in IE (table cells I think), and continues to be so when overriding earlier rules in the cascade.

Answer 5

As I understand the question, you're wondering about when an unstyled element will take on the style defined in a browser stylesheet versus when it will take the style of its parent. This is actually a question about specificity, not inheritance. Take this overly obvious and simplistic example:

Browser sheet
a { color: blue }

Page author sheet
div { color: green }

HTML
<div><a href="#">This is a link</a></div>

As you would expect, the link will be blue, not green, because the browser's rule is more specific. It has nothing to do with inheritance because the link never has a chance to inherit. Precedence for an element's style flows:

1. Inline style; you can't get more specific than this, and it trumps everything (possible exception is if !important exists on a relevant rule)
2. Most specific selector (located anywhere); the selector with the highest specificity will be applied, no matter where it's located in the inheritance structure, as described by Rob Allen in this thread
3. Selector most recently applied, then parsing up the inheritance tree (style tags in the document => author sheet => user sheet => browser sheet; note that user sheet might overrule author sheet in some instances, but generally the author is definitive)
4. Parent's style for the property (or if the parent doesn't have the requisite property, on up the DOM); obviously not all properties are inherited

The main reason that browser styles aren't preventing parent styles from being inherited is that browser styles are typically very sparse and define things like color, font-size, etc. as high up the DOM tree as possible to make them easy to override. If you had a browser that defined, say, a color for span elements, then you might well run into problems trying to get a generic div color to inherit.

Answer 6

You may want to look into "Specificity" also

http://htmldog.com/guides/cssadvanced/specificity/