CSS Priority

In this article, you will learn the CSS priority based on CSS type and selector. You will also learn how to change the CSS priority.

What is CSS priority?

CSS priority is also known as CSS specificity. An HTML element can be targeted by multiple CSS rules. If the same CSS property is defined multiple times with different-different values then the browser will apply one value based on priority. This is what CSS priority is about.

Letโ€™s take an HTML element paragraph <p> for example:

<p id="first-paragraph" class="paragraph"> This is a sample paragraph </p>

Now letโ€™s define multiple CSS rules for it:

1.) Defining CSS rule using ID selector

#first-paragraph{
	color : red;
}

2.) Defining CSS rule using Class selector

.paragraph{
	color : blue;
}

3.) Defining CSS rule using Tag name selector

p{
	color : green;
}

Because the browser can apply only one color to this paragraph, it will have to decide which CSS rule takes priority over other ones.

In the above example, the browser will apply color red because #id selector has more priority than others.

How does CSS Priority work?

The browser takes priority to apply CSS rules based on CSS type and selector. Letโ€™s understand one by one in details:

Priority based on CSS type

The browser will decide the priority based on three types of CSS (inline, internal, and external). The below image shows the priority among these three types:

CSS priority based on CSS type

Letโ€™s take an HTML element heading <h1> for example:

<h1> This is a sample Heading </h1>

Letโ€™s define CSS rules of all three types (Inline, Internal, and External) and see the output:

First create a .css document file (eg: my-style.css) and write the below CSS rules:

/* defining external css rules */ 
h1{
    background-color:yellow;
}

Example (Defined all three types)

<!DOCTYPE html>
   <html>
    <head>
      <!-- Externally defined CSS rules adding to the HTML page --> 
      <link rel="stylesheet" type="text/css" href="my-style.css" />
      <style>
        /* Defining Internal CSS */
        h1{
           background-color:blue;
        }
      </style>
    </head>
    <body>
         <!-- Defining Inline CSS -->
         <h1 style="background-color:green"> This is a sample Heading </h1>
    </body>
  <html>

Output

This is a sample Heading

In the above example, Inline CSS has more priority than others thatโ€™s why here background color green has applied by the browser.

Priority based on CSS selector

Browser will also decide the priority based on CSS selectors (eg: #id, .class, and Tag name) . The below image shows the priority among the selectors:

CSS priority based on CSS selectors

Letโ€™s take an HTML element heading <h1> with id and class attribute for example:

<h1 id="my-heading" class="title"> This is a sample Heading </h1>

Example (Defined all selectors)

<!DOCTYPE html>
   <html>
    <head>
      <style>
        /* Defining CSS rule using id selector */
        #my-heading{
            color : red;
        }

        /* Defining CSS rule using class selector */
        .title{
           color : blue;
        }

        /* Defining CSS rule using tag name selector */
        h1{
            color : green;
        }
      </style>
    </head>
    <body>
         <h1 id="my-heading" class="title"> This is a sample Heading </h1>
    </body>
  <html>

Output

This is a sample Heading

In the above example, #id selector has more priority than others thatโ€™s why here red color has applied by the browser.

How does CSS Order work?

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

Scenario 1

/* here css rule is defined on similar selector */
h1{ color : blue; }
h1{ color : green; }
h1{ color : yellow; }

The output will be of color yellow because last defined CSS rule will take high priority.

Scenario 2

As we have seen the priority between Internal and External, Internal CSS having more priority but it will be applicable only when the order of CSS is written properly otherwise, External CSS can have more priority than Internal CSS.

Letโ€™s understand this with an example:

Create an external .css file external-style.css and write the below CSS rule in it:

/* External CSS File */
h2{
   color : green;
}

Case-1: If the Internal CSS rule added to the HTML page after External CSS import, then Internal CSS will have high priority than External.

<!DOCTYPE html>
   <html>
    <head>
      <!-- Externally defined CSS rules adding to the HTML page --> 
      <link rel="stylesheet" type="text/css" href="external-style.css" />
      <style>
        /* Internal CSS rule is defined after External CSS import */
        h2{
            color : red;
        }
      </style>
    </head>
    <body>
         <h2> This is a sample heading to check order priority </h2>
    </body>
  <html>

Output

This is a sample heading to check order priority

Case-2: If the Internal CSS rule added to the HTML page before External CSS import, then External CSS will have high priority than Internal.

<!DOCTYPE html>
   <html>
    <head>      
      <style>
        /* Internal CSS rule is defined before External CSS import */
        h2{
            color : red;
        }
      </style>
      <!-- Externally defined CSS rules adding to the HTML page --> 
      <link rel="stylesheet" type="text/css" href="external-style.css" />
    </head>
    <body>
         <h2> This is a sample heading to check order priority </h2>
    </body>
  <html>

Output

This is a sample heading to check order priority

How to change the CSS Priority?

The !important rule is used to change CSS priority. Inย CSS, !important means โ€œthis is importantโ€œ, important rule in CSS is used to add more importance to a CSSย propertyโ€™s value than normal. In fact, if you use the !important rule, it will override all previous styling rules for that specificย propertyย on that element.

Example

<!DOCTYPE html>
   <html>
    <head>      
      <style>
        h1{
            color : green !important;
        }
        h1{
            color : blue;
        }
      </style>
    </head>
    <body>
         <h1 style="color:red;"> This is a sample heading </h1>
    </body>
  <html>

Output

This is a sample heading

It is good to know about theย !importantย rule, you might see it in some CSS source code. However, do not use it unless you absolutely have to.

Conclusion

In this article, you have learned about CSS priority. The CSS priority mainly takes based on the types and selectors. You have also seen that how we can override the CSS rules using !important rule.

If you donโ€™t know, what is CSS? then you can visit our another article : Introduction about CSS

Share with friends

2 thoughts on โ€œCSS Priorityโ€

Leave a Comment

Your email address will not be published. Required fields are marked *