Specificity in CSS [3 types]

Open-Source Internship opportunity by OpenGenus for programmers. Apply now.

Have you ever wondered why no matter what you do, the styles you define just dont seem to work!. Well, It could be that the style you are applying right now is not winning the battle with previous styles or styles from a library such as bootstrap. This OpenGenus article will explore how CSS specificity works and you will have an idea of how you can take control over your CSS styles.

Table of contents:

Specificity
So how do we use css together with HTML!
Inline vs Internal vs External
Selector Specificity!
Selector types
!Important
Summary

Key Takeaways (Specificity in css)

In styling Inline styles always win, with Internal styles following.
Id selectors have more weight than classes, and classes have more weight than element selectors.
If you applied styles in different part of css, and these styles have equal weight then the last style added will be applied.

Specificity!

First lets learn about what specificity means in CSS. To explain this we have to consider the context in which specifity applies.

In order to make this article easy to absorb even for those who are new to CSS, let us learn about how CSS works.

CSS is a cascading stylesheet. What this means is that it is an instrument or technique we use to style html which is text or image that we see on a website. hence CSS is way we use to make a website look good such as addding colors to text or aligning content in different ways or even creating animation.

When writing styles in css you start writing your styles the top and go down from there. So If you for example make your websites background black at the top of your CSS file. then down from there make your background some other color using the same type of selector as the first style. then the second style will apply which results in your website not longer having a background of black. Because It's changed.

    <style>
        body {
        background-color: black;
        
        background-color: red;
        }
    </style>

But you need to keep in mind that this depends on the type of selectors you use for styling different parts of your website. So it is very crucial to learn about CSS selector specificity.

So how do we use css together with HTML!

Well there are three ways we can add css to html.

inline : is when we add styles to individual html tags or elements such as div, h1, a and so fourth.

<body style="background-color: red">
    <!-- html content -->
</body>

internal : is when we add style inside the head element of html files using the style tag. The style will work whether it be defined in the head of the html file or the body.

    <style>
        body {
        background-color: blue;
        }
    </style>

external : is when we use external CSS file to define styles for a html file and use the link tag to add it to the html. hence link the style to the CSS.

    <head>
       <link rel="stylesheet" href="./yourFilePath/FileName.css"> 
    </head>

   /* your css file  */
   
   body {
   background-color: yellow;
   }

Let's say we defined a style using this three options for the same html file and defined the background of the html file to be red using inline CSS, blue using internal CSS and yellow using external CSS.

Question

Let's say we defined a style using this three options for the same html file and defined the background of the html file to be red using inline CSS, blue using internal CSS and yellow using external CSS. ,Which one do you think will apply, Is the background of the website going to be red, blue or yellow

yellow

red

blue

Inline css more specific as it is added to the element itself inside the html, and has the highest specificity over Internal and External!

If you answered red! on the first try, great!, If you didn't thats totally okay!, I will explain everything so that you will be confident about CSS specifity.

Inline vs Internal vs External

Inline > Internal > External

Inline	Internal	External
style inside html	style inside html	style outside html
wins over all	wins over External	loses to internal and external

In CSS the more specific the style the greater priority it will have and win the battle to be applied to the html.

Inline has the highest specifity. Because it sticks to the individual CSS element.
Internal follows as the style is in the same file as the html.
External has the lowest specificity because the style is defined outside of the html file.

Selector Specificity!

The browser uses an algorithm to calculate the weight of a given CSS declaration. If there are two or more declarations providing different property values for the same element, the declaration value in the style block that has the greatest algorithmic weight gets applied.

The specificity algorithm is a three column value with ID-CLASS-TYPE

Next we will explore how we select html elements so that we can properly apply styles to them.

Selector types

There are three ways we can generally use to style html.

Id selectors : Is a type of selector that uniquely identifies each tag in html . has a priority ranking value of 1-0-0.

<body id="app">
</body>

#app {
 background-color: red; /*- 1-0-0  -*/
}

Class selectors : Is a type of selector that we can use to addentify individual as well as group of elements. has a priority ranking value of 0-1-0.

<body class="app">
</body>

.app {
 background-color: blue; /*-  0-1-0   -*/
}

Element selectors : Is a type of selector in which we can use the names of the tags in html. has a priority ranking value of 0-0-1.

<body>
</body>

body {
 background-color: yellow; /*-  0-0-1   -*/
}

If two or more css styles have the same weight then the one that is defined last will be applied by the browser.

basic html :-

<body id="app">
</body>

CSS :-

 #app {
 background-color: green; /*-   1-0-0    -*/
 }
 
 #app{
 background-color: black; /*-  1-0-0 -> last style will be applied!    -*/
 }

Id wins over class

 #app {
 background-color: green; /*-   1-0-0  Id wins  -*/
 }
 
 .app{
 background-color: black; /*-    0-1-0   -*/
 }

And class wins over Element

 .app {
 background-color: green; /*-    0-1-0  class wins  -*/ 
 }
 
 body{
 background-color: black; /*-      0-0-1 ->        -*/
 }

!Important

lets talk about a css value called !important, which helps force the style you want to apply no matter the weight.

For Example here I have applied my website's background to be blue using the Id selector.

 #app {
 background-color: blue; /*-    1-0-0    -*/ 
 }

And then somewhere down my CSS code I try to change the background-color to green, using class selector.

 .app {
 background-color: green; /*-    1-0-0    -*/ 
 }

As you know this wouldn't work because in this case the class doesn't have enough weight to beat the Id selector.
In such cases If i just don't have the time to find the Id selector I have applied before or I'm just not worrying about the best practices of a production code. I can change the background-color to green using this method.

 .app {
 background-color: green !important;
 }

Summary

Inline css wins over Internal, Internal wins over external. In CSS selectors Id selector has the highest priority with a value of 1-0-0, class selector has the second highest priority with a priority value of 0-1-0 and Element selector has the lowest priority with a value of 0-0-1.