Overriding CSS styles

Ever encountered things - when you try to style your HTML document - like the styles are not applying how they should be? Try to find the reason but got nothing.
Let me take you through various precedences that happen while applying CSS styles to your web page.

Pre-requisites

Basic Knowledge of HTML tags
Knowledge of various ways to embed CSS in HTML
Knowledge of CSS Selectors

Override Styles in Subsequent CSS

Let's take an example:

<style>
   body{
      background-color: black;
      font-family: monospace;
      color: green;
    }
    .pink-text{
       color: pink;
    }
</style>
<h1 class="pink-text">Hello World</h1>

The above example will turn the "Hello World" into pink by overriding the body's color:green.

What if you want to override pink-text class and make the heading some other color?

Let's understand with the help of an example:

We will add another class blue-text in the same h1 tag as this 👇

`class = "class1 class2";

We can apply multiple class attributes to HTML elements with space.

<style>
   body{
      background-color: black;
      font-family: monospace;
      color: green;
    }
    .pink-text{
       color: pink;
    }
    .blue-text{
       color: blue;
    }
</style>
<h1 class="pink-text blue-text">Hello World</h1>

This will turn the pink text into blue text.
One important to note here is: It doesn't matter in which order the classes are listed in the HTML element.
But it does matter in the style section if you put blue-text class before, then the text will again turn pink.

So, this proves that browsers read CSS from top to bottom in order of their declaration.

Overriding Class Declarations by Styling ID Attributes

As we already know, there is one more way to style CSS by using the ID attribute.
Let's see what happens when we give id to our h1 element.

<style>
   body{
      background-color: black;
      font-family: monospace;
      color: green;
    }
    .pink-text{
       color: pink;
    }
    .blue-text{
       color: blue;
    }
    #orange-text{
       color: orange;
    }
</style>
<h1 class="pink-text blue-text" id="orange-text">Hello World</h1>

Our text changes to orange. But one possible explanation for it is because of the browser reading CSS from top to bottom. Let's move this before .pink-text it's still orange.

It's because the id attribute always takes precedence. No matter where you put it in the style element.

Override Class Declarations with Inline Styles

Apart from class and id attributes, there is another way of overriding styles, using inline CSS.

<style>
   body{
      background-color: black;
      font-family: monospace;
      color: green;
    }
    .pink-text{
       color: pink;
    }
    .blue-text{
       color: blue;
    }
    #orange-text{
       color: orange;
    }
</style>
<h1 class="pink-text blue-text" id="orange-text" style="color: white">
  Hello World
</h1>

It will override all the other styles and makes the text white.

Override All Other Styles using Important

So, we have covered all the ways to override styles. This is the last way to do it. This is the most powerful method of overriding.

In many situations, we use CSS libraries that accidentally override our own CSS. You can use !important when you absolutely sure that an element has specific CSS.

Let's take an example. Suppose we want our h1 to be pink no matter what. So, here we can use !important keyword.

<style>
body{
      background-color: black;
      font-family: monospace;
      color: green;
    }
    .pink-text{
       color: pink !important;
    }
    .blue-text{
       color: blue;
    }
    #orange-text{
       color: orange;
    }
</style>
<h1 class="pink-text blue-text" id="orange-text" style="color: white">
    Hello World
</h1>

This will override all the other styles that we apply to our h1 tag and make the text pink.

You can try whatever we learned in the codepen below 👇

TechNik