In this section, we will learn about the !important property in CSS.
Note: we’re assuming you’re already familiar with the CSS Specificity.
!important in CSS
The !important property is used when we want to assign a value to a CSS property in order to style an HTML element but also want to make sure this value will be the only value for that target property!
For example, let’s say there are two selectors and both are targeting one specific element in a page. Now, the first one uses the #id attribute to target the element, but the other one uses the name of the class attribute of that element. Now, if we want to make sure the value declared for the property in the second style (the one with the class selector) to be the final winner, we can attach the property `!important` along the assigned value to the property and that will guarantee this value will be used for the property.
Alright, enough with theory and now let’s go and see how we can practically use this property in our documents.
CSS !important Property Syntax:
This is how we use the !important property:
selector {
property: value !important;
}
As you can see, the !important property comes after the value we assign to a CSS property.
Example: using !important property in CSS
See the Pen using !important property in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.
How Does !important Property Work in CSS?
In the example above, even though “inline style” has the highest priority (worth 1000 points), it’s the style element with p-selector that’s going to format <p> element because it used “!important” next to the value assigned to “color” property.
Note: Only the value of those properties that comes with “!important” keyword as well, will be used to format the target element. Basically, this keyword works only on an individual property, not the entire style.
Example: CSS !important property
See the Pen CSS !important property by Enjoy Tutorials (@enjoytutorials) on CodePen.
In the example above, only “color” property of the style with “p selector” will be used to format the <p> element (because we used the keyword “!important” next to the value). But the “border” property of this style won’t be used to format the target element for two reasons:
- First: the priority of this style is lower than the inline style.
- Second: there’s no “!important” keyword next to the value assigned to the “border” property of this style.
Final notes:
The use of “!important” keyword should be as low as possible. Because, it puts the highest priority on a property and so if you use it too much, styles within a webpage won’t follow the normal rules of cascading and so it makes debugging more difficult for developers.
Also, it’s better to use class selector over id selector. Because, using id selector puts a high priority on the style that uses it and makes it more difficult to override a style that uses the id selector.
