Next / Previous / Contents / TCC Help System / NM Tech homepage

8. When rules collide

Style rules may come from multiple sources, and each source may have more than one rule that might apply to a given element of your page. How are these collisions resolved?

8.1. Cascading

Up to three style sheets may apply to a page.

  • The user can provide their own stylesheet.

  • The author of the page may attach a style sheet to the page.

  • The browser may have a built-in style sheet that applies if neither the user nor the author has provided one.

Normally, the page author's style sheet has the highest priority, followed by the user's, with the browser's style last.

However, a rule can override rules from other, higher-priority style sheets by including the special keyword “!important” after the property value. For example, suppose this rule appears in the user's style sheet:

  p.admon { font-style: italic !important; }

Paragraphs with class='admon' would be set in italics, even if the author's style sheet specifies a different font-style value.

Here is the ranking of all possible sources with and without the !important keyword, from highest to lowest priority:

  • User stylesheet with !important.

  • Author stylesheet with !important. (This has changed since the CSS-1 specification, which gave author rules precedence over user rules.)

  • Browser stylesheet with !important.

  • Author stylesheet without !important.

  • User stylesheet without !important.

  • Browser stylesheet without !important.

8.2. Specificity: Which selector applies?

When more than one selector applies to a given element, the more specific selector is used. Here are the rules for calculating specificity:

  • Selectors that refer to a specific element by its ID value (see Section 7.7, “Selecting specific single elements by ID”) are the most specific.

  • Selectors that use non-ID attributes and pseudo-classes are less specific.

  • Selectors containing element names are less specific still. The fewer element names, the less specific. So, for example, selector “em” is less specific than “h1 em”.

  • The universal selector “*” is least specific.

8.3. Inheritance

Most properties inherit from the properties of parent elements. That is, a property that applies to an element generally applies to all of the elements inside it.

For example, the HTML body element is the parent element for the content of a web page. So a rule such as

  body { color: green; }

would apply to the entire page unless overruled by a more specific rule at a lower level.

Some properties, however, do not inherit. For example, the background property determines what appears behind an element. The default value of this property is transparent, so if there is no specific rule applying to the background of an element, its background is invisible and you see the background of the parent element behind it.