CSS Important

An important property in CSS provides to give more importance compare to normal property. The !important means ‘this is important‘. This rule provides a way of making the Cascade in CSS style.

If you want to apply this property to the text, then the priority of that text is higher than other priorities.

Syntax:

element { 
  font-size: 14px !important;  
  color: blue  !important; 
  ... 
}

Example:

<!DOCTYPE html>
<html>
  <head>
    <style>
      h1 {
        color: white ;
      }
      H1 {
        color:blue !important;
      }
      body {
        background-color:#ffcccc !important;
        text-align:center;
        background-color:yellow;
      }
   </style>
  </head>
  <body>
    <h1>Hello World.</h1>
    <h1>Welcome to the I2 tutorials. Example of <i>!important</i> property.</h1>
    <p></p>
  </body>
</html>

OUTPUT:

CSS Important

Example:

Applying the !important attribute on the border of the text.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
 body{
  text-align: center;
 }
h1 {
 border-color: #006633 !important; 
 border: 5px green solid;
 border-color: black;
}
h2{
 color: #cc6600 !important;
 color: red;
 border-color:#4d0039 !important;
 border: 5px green solid;
}
</style>
</head>
<body>

<h1>Hello World :) :)</h1>
<h2>Welcome to the i2tutorials.com</h2>

</body>
</html>

OUTPUT:

CSS Important