In CSS, ‘!important’ is a keyword that we use with the values of the CSS properties. When we use the ‘!important’ with the CSS property value, the browser gives more importance to that property value over the other property values on the same element.
Here are some use cases where we require to use the ‘!important’ with the CSS property values.
In the content management System (CMS), we can’t edit the CSS of the web page. So, if we add extra CSS to the web page, it can’t get applied to the specific element, but if we use ‘!important’ with CSS, we can override the initial values of particular CSS properties.
Whenever we use any UI library in web frameworks such as ReactJS, Svelte, etc., we sometimes can’t edit the CSS of the UI component. In such cases, we can use the ‘!important’ with CSS properties to override their values.
The real-time application contains large CSS files. Sometimes, CSS doesn’t affect the element due to unknown overriding. In this case, we can use ‘!important’ to override all values of a particular property on the particular element.
Syntax
Users can follow the syntax below to use the ‘!important’ with the CSS property values.
CSS-property: value !important
In the above syntax, CSS-property can be any CSS property such as margin, padding, padding-left, font-size, etc., and value be respected value for the CSS property.
Example
In the example below, we have created three div elements with the class names ‘black’, ‘grey’, and ‘red’. In CSS, we have given the background color to the div element based on the class names.
Also, we have applied the ‘background-color: pink’ CSS property to all the div elements with the ‘!important’ keyword. In the output, users can observe that all div’s background color becomes pink as we have used the ‘!important’.
Using the !important with CSS property values
This is a black div.This is a grey div.This is a red div.
Example
In the example below, we have created two different paragraphs. One paragraph contains the ‘one’ class name, and another contains the ‘two’ as a class name. We have applied some CSS to all
随缘网络PHP企业网站管理系统V2.0正式发布，该企业网站管理系统采用PHP+MYSQL编写，界面色调风格延续之前1.0版管理系统简洁浅蓝色风格，稍有所变动。变更分类树形目录方式采用jquery库，产品，文章三级无限分类。希望大家能够喜欢。系统中难免有些小问题，希望大家在使用中有什么问题可到本站论坛提出，我们将总结各问题后给予修正并升级。本站再次声明对于免费版系列系统本站不提供QQ电话等技术咨询服
elements.
To override the CSS of an element with the class name ‘one’, we have used the ‘!important’ keyword to override the style applied on the ‘
’ element. In the output, users can observe that the first paragraph has different styles.
Using the !important with CSS property values
This is a paragraph.
This is another paragraph.
Example
We will learn to override the ‘!important’ by using another ‘!important’ via the example given below. We have created the three div elements with the ‘initial’, ‘middle’, and ‘final’ class names.
We have used the ‘!important’ with the background-color CSS property, which we are applying to div elements. So, Initially, all div elements’ background is aqua. After that, we again used the ‘!important’ with the background-color CSS property while applying it to the elements with the class names ‘middle’ and ‘final’.
In the output, users can observe that blue and lightsalmon colours override the ‘aqua’ colour.
Using the !important with CSS property values
This is an initial Div element.This is a middle Div element.This is a final Div element.
Conclusion
Users learned to use the ‘!important’ in CSS. Basically, we should avoid the overuse of the ‘!important’; otherwise, it can become a headache for anyone to solve lots of ‘!important’ as it overrides the CSS for the element.
However, users can use ‘!important’ while updating the CSS of any library's content management system or a UI component.
