Using !important rules can be a dangerous way to style your webpage that usually means you are forcefully doing this, but they exist for some reason.
The paragraph will be colored red, even there is a ID selector that has higher priority. So, the this rule overrides all the particular property.
An !important rule works like this:
<!DOCTYPE html>
<html>
<head>
<title>Knowing !important</title>
<style type="text/css">
div { color: red !important; }
#one { color: green; }
</style>
</head>
<body>
<div id="one">RED COLOR</div>
</body>
</html>Normally use a rule defined in an external CSS style sheet that is overruled by a CSS style defined in the head of web document, which, in turn, is overruled by an in-line style within the element itself (we are assuming equal specificity of the selectors). So, defining a rule with a !important ‘attribute’ discards the normal concerns as regards the ‘later’ rule overriding the ‘earlier’ ones.
Read Also: Clearing floats
This rule is a part of CSS1.
Supported browsers: IE5.5+, Firefox 1+, Safari 3+, Chrome 1+.
Also, this is something that you do not want to use this pretty often, because you know you’re working with some other people around you who can override other properties.
In the mid to late 90s, when the CSS1 specification was drafted, CSS introduced !important declarations which can help developers and other users easily override the normal specificity when making any changes to the style sheets. In CSS2, !important declarations have remained the same with the one change only. Also in CSS3, nothing new added or altered in connection with this unique declaration.