CSS The !important Rule

➢The !important rule in CSS is used to add more importance to a property/value than normal.
➢In fact, if you use the !important rule, it will override ALL previous styling rules for that specific property on that element!

EXAMPLE:

<!DOCTYPE html>
<html>
<head>
<style>
#p1 { 
    background-color: orange;
}
p {
    background-color: green !important;
}
.p2 {
    background-color: red;
}
</style>   
</head>    
<body>  
<p> Paragraph</p>      
<p id="p1">Paragraph 1</p>      
<p class="p2">Paragraph 2</p>      
</body>
</html>

RESULT:

paragraph

paragraph 1

paragraph 2

Run

EXAMPLE:

<!DOCTYPE html>
<html>
<head>
<style>
#p1 {
     background-color: orange;
}

p {
     background-color: green !important;
}

.p2 {
     background-color: red;
}
</style>
</head>
<body>
<p>Paragraph</p>
<p id="p1">Paragraph 1</p>
<p class="p2">Paragraph 2</p>
</body>
</html>

RESULT:

paragraph

paragraph 1

paragraph 2

Run

Prev Page Next Page