The CSS properties are applied in an order which is defined by using the specificity concept in CSS. However, sometimes you may need to give importance to a CSS properties’ value over the other values of the same property. For this, the !important keyword is used with a CSS property to make it more prominent than other properties. This article demonstrates the usage of the !important rule in CSS.
How !important rule works in CSS
To understand the working, you must have an understanding of the syntax followed by !important rule.
The selector refers to the CSS selector being used whereas the property refers to the CSS property being applied with some value. The placement of the !important keyword also matters, and it must be at the end of the property value as shown in the syntax.
How to use !important rule in CSS
As the !important rule does not follow the specificity; thus it does not matter where the !important rule is applied it just stands at the highest level of specificity. Let’s have some examples to get a clearer picture of this phenomenon.
Example 1: Using external, internal, and inline CSS
Usually, the inline CSS has the highest priority followed by internal and external CSS. The following code uses the !important rule in an external style sheet to show its overriding behavior.
HTML
In the above code, an <h3> element is used with inline styling that intends to change the background color.
External CSS
background-color: lightgreen !important;
padding: 5px;
border: solid thin;
width: 50%;
}
The above code refers to the external stylesheet that would be linked to the HTML document. It is observed that the background-color property has an !important rule with it.
Internal CSS
The above CSS code has been used as an internal CSS; this internal CSS also tries to change the background color of the <h3> element.
Output
Although the inline has higher priority than internal and external. However, we have used the !important keyword with the background-color property in external CSS. Therefore, the background-color will be fetched from the external CSS file as can be seen from the above output.
Example 2: Using various CSS selectors
Here, the CSS selectors such as class, and id of an element are used. The !important rule is applied inside the class of an element.
HTML
In the above code a paragraph is created with id=”para” and class=”cl”.
CSS
p{ padding: 5px; border: solid thin; width: 75%;}
.cl {background-color: skyblue !important;}
#para {background-color: green;}
</style>
The “.cl” selector and the “#para” CSS selectors attempt to set the background color of the <p> element. Notice that the !important rule is applied to the “.cl” selector .
Output
Although the id selector has a higher priority than the class selector, the !important rule will override the background-color property used in the id=”para” selector.
Conclusion
The !important rule is quite helpful in various complex scenarios where multiple external and internal style sheets are being used and you just want to add another CSS property with the highest priority. Keeping the significance of the !important rule in mind, this post provides a detailed guide on the working and usage of the !important rule in CSS. The usage of the !important rule is illustrated by exercising it on various CSS selectors and observing that it overrides the relevant CSS property used by other CSS selectors.
from https://ift.tt/I3ZwhJb
0 Comments