What are the implications of using "!important" in CSS?

HTML Web Development Front End Technology

The !important rule overrides all previous styling rules. It is based on the concept of priority or specificity. The !important rule provides a way to make your CSS cascade. It also includes the rules that are to be applied always. A rule having the !important property will always be applied, no matter where that rule appears in the CSS document. Let us see an example −

Priority - Without Using !important

Example

Let us first see an example how the specificity and priority works without using the !important −

<!DOCTYPE html>
<html>
<head>
   <style>
      .mycolor{
         color: red;
      }
         .mycolor{
         color: orange;
      }         
   </style>
</head>
<body>
   <h1>Checking Priority</h1>
   <div class='mycolor'>
   This is orange colored
   </div>
</body>
</html>

Output

Priority - Using !important

Example

Now, we will see an example how the specificity and priority works using the !important −

<!DOCTYPE html>
<html>
<head>
   <style>
      .mycolor{
         color: red !important;
      }
         .mycolor{
         color: orange;
      }         
   </style>
</head>
<body>
   <h1>Checking Priority</h1>
   <div class='mycolor'>
   This is red colored because we used !important to override
   </div>
</body>
</html>