1-1: Specificity, Precedence and Inheritance
Specificity Heirarchy
There are four categories which define the specificity level of a selector:
- Elements have the lowest priority (ex: h1).
- Classes have a higher priority than elements. (ex: .second)
- IDs have the highest priority of these three. (ex: #first)
- Inline style is always given the highest priority! (ex: h1 style="color:green")
Precedence is a rule of Specificity. In the case of conflicting CSS rules, the browser will display the the one closest to the html element - provided that the selectors carry the same specicifity ranking (or weight).
Inheritance simply means that the child element will inherit the CSS declaration of the parent element (IF there is no CSS applied to the child element).
“Order and simplification are the first steps towards mastery of a subject”
― Thomas Mann