Styling Web pages with CSS-2 |  |
Styling Web pages with CSS-2 | |
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?
There are three possible sources for stylesheet rules: see Section 8.1, “Cascading”.
When more than rule from a given source might apply, see Section 8.2, “Specificity: Which selector applies?”.
Not every property is specified for every element. In such cases, many properties are inherited from other rules. See Section 8.3, “Inheritance”.
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.
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.
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.