CSS Box Model Explained with Examples | VITSOLS

What is CSS Specificity?

When you write multiple CSS rules for the same element, the browser needs to decide which style should win. This decision is based on the concept of specificity.

Specificity is calculated based on the types of selectors used in a rule. The more specific a selector is, the higher its priority.

There are four main types of selectors, listed here in order of their specificity:

Inline styles: Styles applied directly to an element using the style attribute.
ID selectors: Selectors that target an element with a specific ID.
Class selectors: Selectors that target elements with a specific class.
Element selectors: Selectors that target elements by their tag name.

👉 Think of specificity as a priority score.

Higher score = rule wins.
If scores are equal, the last rule in CSS file wins.

CSS Specificity Rules in Simple Words

Selector Type	Example	Specificity Value	Simple Explanation
Inline Styles	`<h1 style="color:red;">`	1000	Strongest rule, written directly inside the tag.
ID Selector	`#main-title { }`	100	Used with `#id`, almost always wins over classes and tags.
Class, Pseudo-classes, Attribute	`.btn { }`, `:hover`, `[type="text"]`	10	Used often for styling groups of elements.
Element / Tag	`p { }`, `div { }`	1	Lowest power. Styles all elements of a type.
Universal Selector	`* { }`	0	Applies to everything, but weakest of all.

Quick Tip: When multiple CSS rules target the same element, the one with the highest specificity wins. If equal, the last one in the CSS file is applied.

CSS Specificity Hierarchy Chart | VITSOLS

Easy Examples

Example 1: Inline vs Class


/* HTML */
<p id="intro" class="highlight" style="color:red;"> Hello CSS! </p>

/* CSS */
// Inline style → Highest specificity (1000)
style="color:red;" → Specificity = 1000 ✅ Wins!

#intro {
   color: blue /* Specificity = 100 */
}

.highlight {
   color: green /* Specificity = 10 */
}

The inline style style="color:red;" overrides both the #intro (ID) and .highlight (Class), so the text becomes red ✅.

Example 2: ID vs Class


/* HTML */
<p id="intro" class="highlight"> Hello CSS! </p>

/* CSS */
.highlight { 
   color: green /* Score = 10 */
}

#intro { 
   color: blue /* Score = 100 */
}

ID wins → text will be blue ✅.

Example 3: Class vs Element


/* HTML */
<p class="highlight">  Hello CSS! </p>

/* CSS */
p { 
   color: orange /* Score = 1 */
}

.highlight { 
   color: green   /* Score = 10 */
}

Class wins → text will be green ✅.

Free Online CSS Specificity Calculators

#	Tool Name	Features
1	Specificity Keegen Calculator	Simple calculator showing A-B-C-D values
2	Polypane CSS Selector Specificity	Calculate the specificity of selectors all the way up to CSS Selectors level 4

CSS Image Sprites