Style Preecedencr in CSS : Specificity, Inheritance and Cascade

CSS rule applies to a given html element is controled by

• Specificity Calculations
• Inheritance
• The Cascade

Specificity Calculations

Specificity is calculated by counting various components of your css and expressing them in a form (a,b,c,d). This will be clearer with an example, but first the components.

• Element, Pseudo Element: d = 1 – (0,0,0,1)
• Class, Pseudo class, Attribute: c = 1 – (0,0,1,0)
• Id: b = 1 – (0,1,0,0)
• Inline Style: a = 1 – (1,0,0,0)

An id is more specific than a class is more specific than an element.
It’s also important to note that 0,0,1,0 is more specific than 0,0,0,15.

Let’s look at the example

div p.bio {font-size: 14px} - (0,0,1,2)
#sidebar p {font-size: 12px} - (0,1,0,1)

The second has the higher specificity and thus takes precedence.
Importance trumps specificity, When you mark a css property with !important you’re overriding specificity rules and so

div p.bio {font-size: 14px !important}
#sidebar p {font-size: 12px}

means the first line of css above takes precedence instead of the second. !important is still mostly a hack around the basic rules and is something you should never need if you understand how the rules work.

Inheritance

Elements inherit styles from their parent container. If you set the body tag to use color: red then the text for all elements inside the body will also be red unless otherwise specified.

Not all css properties are inherited, though. For example margins and paddings are non-inherited properties. If you set a margin or padding on a div, the paragraphs inside that div do not inherit the margin and padding you set on the div. The paragraph will use the default browser margin and padding until you declare otherwise.

You can explicitly set a property to inherit styles from it’s parent container, though. For example you could declare

p {margin: inherit; padding: inherit}

and your paragraph would then inherit both from it’s containing element.

The Cascade

At the highest level the cascade is what controls all css precedence and works as follows.

1. Find all css declarations that apply to the element and property in question.
2. Sort by origin and weight. Origin refers to the source of the declaration (author styles, user styles, browser defaults) and weight refers to the importance of the declaration. (author has more weight than user which has more weight than default. !importance has more weight than normal declarations)
3. Calculate specificity
4. If two rules are equal in all of the above, the one declared last wins. CSS embedded in the html always come after external stylesheets regardless of the order in the html

#3 above is likely the one you’ll need to pay attention to most.
#2 just understand that your styles will override how a user sets their browser unless they set their rules to be important.