Using Style Sheets

Inheritance and Cascade

Style rules affect how elements are rendered, but what if no style rule matches an element? Or what if more than one rule applies? That's where the concepts of inheritance and cascade come into play.

Inheritance

Some style properties are inherited by default. That is, child elements inherit the style value of their parent. These include properties such as color, font and text-align.

For example, given the code below

p { color: red }

...

<p>Sample paragraph with <b>bold</b> text.</p>

The text within the <B> and </B> tags will appear in red, because its parent element, the P tag, has a style of color:red and there is no style rule matching the B tag to set a different color.

Likewise, any children of the B tag would also inherit the paragraph's color.

<p>Sample paragraph with <b>bold and <i>bold italic</i></b> text.</p>

But note that if you added this rule:

b { color: green }

The text within the <B> and </B> tags would be green, as would the text between the <I> and </I> tags since the B tag is the parent of the I tag.

Some style properties permit a value of inherit, indicating that the value should be taken from the element's parent, even if the property is not inherited by default.

Resolving Conflicts

A single element may be matched to several style rules, and those rules may specify conflicting values for a given style property. To determine which value to use, CSS follows a set of steps to assign weights to each rule and applies the one that carries the most weight.

It's important to understand that conflicts occur between style declarations, not the style rules themselves. For example, the following style rules have no conflicting declarations.

b   { font-size: 12pt; }  /* no conflicts */
p b { color: red; }

But the following style rules do, for any B tag within a P tag.

b   { font-size: 12pt; }    /* conflict between font-size property */
p b { font-size: 14pt;
      color: red; }

The conflict is between the font-size values given. The color property is not in conflict since only one rule specifies it. The two rules are compared to determine which takes precedence for that particular property.

CSS follows these steps to resolve conflicts:

1. Determine all rules that apply to the element. If none apply use the inherited or default value.
2. Sort by origin (or cascade order) and weight (the !important keyword).
3. Sort by specificity.
4. Use the order of the rule definitions, the last rule defined takes precedence.

With the two middle steps, the rules are ranked and any that do not match the highest ranking of the group are filtered out. If only one remains, it is used. Otherwise the next step is applied to the surviving rules.

Cascade

Style sheets have three origins. Every user agent has a default style sheet that is always applied to a page. Even if the browser doesn't use an actual style sheet, it acts as though it did. Most browsers allow the user to change some of these defaults, such as fonts and colors, in preference or option settings.

User style sheets are a feature that allows individuals to define their own style sheets to be used on pages. Some users might need larger fonts or colors with more contrast than what the browser or page author has chosen, for example. User style sheets provide a means for them to address those needs.

Author style sheets refer to the styles defined or included within a page.

For resolving conflicts, rules in author style sheets take precedence over rules in user styles which in turn take precedence over the rule of the default style sheet.

The !important Keyword

The !imporant keyword can be used on a style declaration to reverse the precedence of author and user style sheets. If the user style sheet specifies !important on a declaration, it will override the author's declaration. For example, given these style sheets

/* in the user's style sheet */

p {
  color: red;
  font-size: 18pt !important;
}

/* in the author's style sheet */

p {
  color: green;
  font-size: 12pt;
}

paragraph text should appear in 18 point green font. The author's color and font-size would normally override the user's color and font-size. But the user's font-size is declared !important so it takes precedence.

Note that if the author's style sheet declared font-size as !important, the user's font-size would still take precedence.

Within style sheets of the same origin, the !important keyword will also give one declaration precedence over conflicting declarations. As an example, given the following, the second rule would normally override the first (due to order, discussed below) setting both the color and font-size properties.

/* in the author's style sheet */

p {
  color: green !important;
  font-size: 12pt;
}

p {
  color: red;
  font-size: 18pt;
}

But paragraph text will appear in 18 point green font because the first rule's color is marked as !important.

Prev | Next