How to apply !important using CSS?

CSS !important Property: Here, we are going to learn How to apply !important using CSS?
By Apurva Mathur Last updated : July 12, 2023

Introduction

Before jumping to the main topic let's see how priority works when applying CSS? CSS has some fixed priority, and when we apply any styling it gives the output according to the priority set. This priority is set according to the type of selector used while styling.

CSS Selectors

CSS selectors are used to select the content we want to style. CSS selectors select HTML elements according to its id, class, type, attribute etc.

CSS Selector Priorities

<Style> tag: Priority level 1
#id name: Priority level 2
.class name: Priority level 3
Tag-name: Priority level 4 (tag name here refers to any tag like <p>,<h1>etc)

So whenever we apply any CSS by these selectors so it will act according to the priority.

Example without !important

Suppose if I use class name and tag name both on one heading with same CSS color property so it will give the output specified in the class name.

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Title</title>
   </head>
   <style>
      .Paragraph{
      color: red;
      }
      p{
      color: yellow;
      }
   </style>
   <body>
      <p class="Paragraph">
         *************************************************************************<br><br>
         THIS WILL CHANGE ACCORDING TO THE PROPERTY APPLIED IN THE CLASS SELECTOR<br><br>
         *************************************************************************<br><br>
      </p>
   </body>
</html>

Output:

Similarly if I will use id and class name both in one paragraph with same CSS color property so it will give the result according to the property applied via id selector.

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Title</title>
   </head>
   <style>
      #Paragraph{
      color: deeppink;
      font-size: 20px;
      font-family: "Baskerville Old Face";
      font-weight: bold;
      }
      .p{
      color: yellow;
      font-size: 60px;
      font-family: "Blackadder ITC";
      }
   </style>
   <body>
      <p id="Paragraph" class="p">
         *************************************************************************<br><br>
         THIS WILL CHANGE ACCORDING TO THE PROPERTY APPLIED IN THE ID SELECTOR<br><br>
         *************************************************************************<br><br>
      </p>
   </body>
</html>

Output:

Apply !important using CSS

But what if I want that class should be given priority first so in the case where you want to assign property on the specified selector irrespective of its priority in CSS, !important comes in the picture. This basically takes all the attention, doesn't matter on which it is applied and what priority that selector has.

Example with !important

We saw in above example that Id selector was given the priority when used with class selector, now if I want to set the property according to class selector then I will just simply write !important with the property defined.

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Title</title>
   </head>
   <style>
      #Paragraph{
      color: deeppink;
      font-size: 20px;
      font-family: "Baskerville Old Face";
      font-weight: bold;
      }
      .p{
      color: lightseagreen !important;
      font-size: 20px !important;
      font-family: "Arial Rounded MT Bold" !important;
      }
   </style>
   <body>
      <p id="Paragraph" class="p">
         *************************************************************************<br><br>
         NOW THIS WILL CHANGE ACCORDING TO THE PROPERTY APPLIED IN THE CLASS SELECTOR<br><br>
         *************************************************************************<br><br>
      </p>
   </body>
</html>

Output:

CSS Examples »

What does the '+' (plus sign) CSS selector mean?

Space between two rows in a table using CSS