Home > CSS Questions > How to prioritize the CSS property of an element?
!important
Writing !important beside a CSS rule gives it a higher priority with respect to previously defined rule. No other rule can override it. It has higher priority than Class and Id Selectors. The !important property in CSS means that all subsequent rules on an element are to be ignored, and the rule denoted by !important is to be applied. This rule overrides all previous styling rules and the !important property increases its priority.
The !important property is mentioned immediately before the semicolon and at the end of the CSS rule before terminating it.
h1 {
color: blue ;
}
h1 {
color: #FF8882 !important; //important property
}
body {
background-color: #FBF2ED !important;
text-align:center;
background-color: red;
}
In the code above, the normal color for the h1 tag was blue but, because of the !important property, a different color is applied. Similarly, a different color is applied to the background instead of red.
Note: It is not advisable to use !important property very often.