You can override all the above rules by adding a “!important” after any property
This should be used sparingly; excessive use of !important can cause confusion within your codebase
// in css
#thing {
color: green;
}
// add the !important option at the end of your declaration;
p {
color: red !important;
}
<!-- in html -->
<!DOCTYPE html>
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<p id="thing">Will be RED and NOT Green</p>
</body>
</html>
Here we used the !important option in CSS to override the Specificity guideline that would have had the rule with the selector of #thing take precedence under normal circumstances
Live Example
In the example above, the background-color of the element is blue despite that fact that of the conflicting styles #featured is more specific than .box. This is because we used the !important flag on the background-color property inside of the .box style which will override normal cascading rules.