• Register
100 points
5 1

In order to override the other rules we can use !important in the CSS statements.By including !important after any CSS statment ,high priority will be given to that statement.Important declarations are defined as that declaration which is having more importance than normal declaration.

CSS Style Rule

This rule determines the priority of taking style to webpage.Here, we have Inline css has high priority so same property change in internal css will have less authority to make changes in webpage.Means first according to the CSS rules preference will be given to Inline .This will be more clear when you see the example:
  • Inline Css > id > class > Internal Css> External css

Example without !important

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .style{
            color: red;/*Internal CSS has low priority than inline css to see on htmlpage*/
        }
        
    </style>
</head>
<body>
    <h1 class="style" style ="color: blue">Importance</h1><!--Inline CSS has high priority to see on htmlpage-->
    
</body>
</html>

Output 

Importance //will appear on webpage in Blue color

Example with !important

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .style{
            color: red !important;/*Inspite of Internal CSS has low priority than inline css to see on htmlpage beacuse of the  !important it will override any styling rule and now we will see important in red color*/
        }
        
    </style>
</head>
<body>
    <h1 class="style" style ="color: blue">Importance</h1><!--Inline CSS has high priority to see on htmlpage-->
    
</body>
</html>

Output

Importance //will show in red color