CSS Specificity explained

CSS Specificity explained
Table of Contents

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.




Posted by


Having more than six years of experience in this field has helped me test and discover the best strategies to follow online so a business can efficiently boost its online presence and brand awareness/identity. I am passionate about crafting impactful experiences and digital marketing strategies at the intersection of brand and product. It doesn’t matter if you have a newly created business or a well-established one; I will be your GPS and will guide you on the road to your Online Marketing success! Contact me today, and let’s increase your business’ credibility!

Leave a Reply