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. There’s also the fact that the selector is picking specific elements.
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:
- Browser style rules
- External style rules
- Internal style (in the document head) rules
- Inline style rules
- 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 example in “The Cascade” is not properly correct….
If you try to invert the order you will have the same result.
But the rest is a good
are you talking about putting the heading rule before the body rule?
yes, the text says:
“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.”
But if you try to invert the order:
h1, h2, h3 {font-family: Arial;}
body {font-family: Georgia;}
we have the same result.
Oh, I see what you’re saying. It’s a specificity thing.
in Cascading, the value of specific property come the 2nd time isn’t always applied over the first one when you use ratios, as Example :
body {
font-size:120%;
}
p {
font-size:1.4em;
}
the result of the font size will be the first value 120% multiplied by the second ratio 1.4em, so the second value is not always overriding the first value