4.6 CSS Priority

An HTML element can be targeted by multiple CSS rules. Let’s use a simple paragraph for example:

<p class="message" id="introduction">
  MarkSheet is a free HTML and CSS tutorial.
</p>

We can alter this paragraph just by using its tag name:

p{ color: blue;}

Or we can use its class name:

.message{ color: green;}

Or we can use its id:

#introduction{ color: red;}

Because the browser can only pick one color to apply on this paragraph, it will have to decide which CSS rule takes priority over other ones. This is what CSS priority (or CSS specificity is about).

In our example, the paragraph will be red because an #id selector is more specific and thus more important than other selectors.

Order of CSS rules

If similar selectors are in your CSS, the last one defined will take priority.

p{ color: green;}
p{ color: red;}
/* Paragraphs will be red */

The 100 measure

One quick way to figure out how “powerful” a CSS rule is, is by measuring the specificty of the selectors:

• #id selectors are worth 100
• .class selectors are worth 10
• tag selectors are worth 1

The selector with the highest “score” will prevail, no matter the order in which the CSS rules appear.

#introduction{ color: red;}
.message{ color: green;}
p{ color: blue;}

<p class="message" id="introduction">
  MarkSheet is a free HTML and CSS tutorial.
</p>

The #introduction{ color: red;} rule is more specific than the others because ids must be unique throughout a webpage, and can thus only target one element.

.message{ color: green;} can target any HTML element with a class="message" attribute, and is consequently less specific. Same goes for p{ color: blue;} which can target any HTML paragraph.

How to avoid conflicts

While writing your CSS, it’s easy to write conflicting rules, where the same property is applied several times.

To avoid that:

• only use classes: use .introduction instead of #introduction, even if that element only appears once in your webpage
• avoid applying multiple classes on a single HTML element: don’t write <p class="big red important"> but rather <p class="title"> which is more semantically descriptive
• don’t use inline styles like <div style="background: blue;">