Web Teacher

Two or more conflicting CSS rules are sometimes applied to the same element. What are the rules in CSS that resolve the question of which style rule will actually be used when a page is rendered by a browser? The answer is, “it’s complicated.” Several factors are involved. I’ll give you a brief explanation of each factor.

Inheritance

Some properties are passed from parent to child. For example, this rule in a style sheet would be inherited by all child elements of the body and make every font on the page display as Georgia.

body {font-family: Georgia;}

The Cascade

Within the cascade, more than one factor can figure into determining which one of several conflicting CSS rules will actually be applied. These factors are source order, specificity and importance. Location is part of the cascade, too.

Source order means the order in which rules appear in the style sheet. A rule that appears later in the source order will generally overrule an earlier rule. Consider this example.

body {font-family: Georgia;}
h1, h2, h3 {font-family: Arial;}

Because the h1, h2, and h3 selectors are in the source order after the body rule, the headings would display in Arial, not in Georgia.

Specificity

Specificity is determined by a mathematical formula, but common sense can help you understand it.

p {font-family: Georgia;}
.feature  p {font-family: Arial;}

In this case, the selector .feature p is more specific than the selector p. For any paragraph assigned to the class ‘feature’ the font-family would be Arial. Common sense tells you that selecting a paragraph that belongs to a particular class is a more specific choice than selecting all paragraphs. The more specific selector overrules the less specific selector.

!important

There are rules that are declared !important. !important rules always overrule other rules, no matter what inheritance, source order or specificity might otherwise do. A user created stylesheet can use !important to overrule the author’s CSS.

*{font-family: Arial !important;}

This rule would mean that everything (* selects everything) would be Arial no matter what other rules were used in the CSS.

Location

Style rules can exist in a number of locations in relation to the HTML page affected. The location of a rule also plays into determining which rule actually ends up being implemented. The locations are:

1. Browser style rules
2. External style rules
3. Internal style (in the document head) rules
4. Inline style rules
5. Individual user style rules

In the list, the browser style rules are the most “distant” from the HTML page, the individual user styles are the “closest.” Within this cascade of style declarations, the closest rule wins. An inline style overrules an external style, which overrules a browser style.

Related posts:

• The Cascade and Ordering External Stylesheet Links
• The Cascade by Example
• Grouping CSS Selectors
• Calculate the Specificity of CSS Selectors