Specificity

From time to time, as a CSS beginner or an experienced web developer, you will be frustrated if you just added a new CSS rule to your style sheet and discovered that it has no effect. More often than not, this happens because there is another rule with a higher specificity that has priority.

We already mentioned that inline styles take precedence over external style sheets. So it seems more than logical that the order of internal CSS and links to external style sheets will influence how the page will end up looking. Now consider the following rule:

p.warning {
color:red;
}

Suppose the previous stated rule is followed by this next rule:

p.warning {
color:orange;
}

In such a scenario, all paragraph elements with the class warning will appear in orange, not red, because the orange rule appeared later.

But these two rules happen to share a common selector: it is a p with the class warning.

Things would be different if you had rules with selectors such as the following:

p#error  {
color:red...