Recently I came across lot of code using CSS !important declaration. I had known that this declaration existed but I didn’t knew what it was and had never used it. So than I did my research on it and decided to write a post about it. In this article I will discuss what it is, how it is used, when to use it, etc
What is !important?
The !important is a key word which is added to the end of the CSS value to give it more weight. In CSS the rules are applied to elements in a cascading manner.
- Find all the declarations that apply to the element in question.
- The order in which the styles are applied based on importance and origin. The weight of style sheets are, from least weight to highest weight, first user agent styles, than user, than author style sheets, !important author styles and the height weight is for the !important user styles.
- The more specific a selector is, the higher weight it will get. e.g., a style on “div.main p” will have a higher precedence than one just on the “p” tag.
- The rules work in top to bottom order. Rules that are defined later in the document tree have higher precedence than those defined earlier. Also, if rules are imported from style sheet then they are considered before the rules which are directly in the style sheet.
The !important is used to force the style to an element and not be overridden by the cascading CSS. When the !important is used that rule gets more weight than it naturally has.