This property in CSS is used to give more importance compared to normal property. The !important means 'this is important'. This rule provides a way of making the Cascade in CSS.

If we apply this property to the text, then the priority of that text is higher than other priorities. It is to be recommended not to use this CSS property into your program until it is highly required. It is because the more use of this property will cause a lot of unexpected behavior.

If a rule is defined with this attribute, it will reject the normal concern in which the later used rule overrides the previous ones. If we use more than one declaration marked !important, then the normal cascade takes it over again. That means the new marked !important will replace the previous one.

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

Example:

<html>   
    <head>   
        <style>   
            h1 {   
                color: white ;   
            }   
            H1 {   
                color:blue !important;   
            }   
            body {   
                background-color:lightblue !important;   
                text-align:center;   
                background-color:yellow;   
            }   
        </style>   
    </head>   
    <body>   
        <h1>Hello World.</h1>   
        <h1>Welcome to the javaTpoint.com. This is an example of <i>!important</i> property.</h1>   
        <p></p>   
    </body>   
</html>

Lets see with the comparison that how dose this works

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

<h1>Hello World :) :)</h1>  
<h2>Welcome to the hub of learning things./h2>  
</body>  
</html>

Working

As we use the text !important the content that has to be presented in the color green is no longer green because here we used a greater priority tool that changed the color. This change cannot be event by passed by inline styling or any other was.

CSS Important

Table of contents

Example:

Lets see with the comparison that how dose this works

Subscribe to my newsletter

Jalaj Singhal

Jalaj Singhal