A look into CSS specificity, from how it’s calculated, from tags, classes, IDs, and inline styles, as well as how !important comes into it, as well as advice on how to avoid running into specificity wars! Specificity, other than a word that I have a ton of troule saying, is something that not enough new developers understand, and it can lead to some really bad habits. Understanding how it works both makes your life easier, and leads to better code overall!
Inline style wins
The last CSS rule wins. So in an external CSS sheet, if you type CSS for a p tag for color change 3 times, the last color rule will apply.
In cases where the p is more specified, the specified rule will win. ex: div p{ color: black} will win.
If classes are applied then classes will win
If id is applied then id will win
!important is most powerful. It overwrites other rules and applies them. It is highly recommended to avoid it.
