Why should we use !important?-CSS Tutorial-php.cn

Why should we use !important?

王林

Release： 2023-08-23 21:45:02

forward

1118 people have browsed it

Why should we use !important?

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

Copy after login

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’.

<html>
<head>
   <style>
      .black {background-color: black;}
      .grey {background-color: grey;}
      .red {background-color: red;}
      div {
         background-color: pink !important;
         margin: 5px;
      }
   </style>
</head>
<body>
   <h2> Using the <i> !important </i> with CSS property values </h2>
   <div class = "black">
      This is a black div.
   </div>
   <div class = "grey">
      This is a grey div.
   </div>
   <div class = "red">
      This is a red div.
   </div>
</body>
</html>

Copy after login

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

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.

<html>
<head>
   <style>
      p {
         padding: 20px;
         background-color: #f1f1f1;
         border: 1px solid #ccc;
         border-radius: 5px;
      }
      .one {
         background-color: green !important;
         border: 5px dotted blue !important;
      }
   </style>
</head>
<body>
   <h2> Using the <i> !important </i> with CSS property values </h2>
   <p class = "one"> This is a paragraph. </p>
   <p class = "two"> This is another paragraph. </p>
</body>
</html>

Copy after login

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.

<html>
<head>
   <style>
      div {
         background-color: aqua !important;
         margin: 10px;
         padding: 5px;
      }
      .middle {background-color: blue !important;}
      .final {background-color: lightsalmon !important;}
   </style>
</head>
<body>
   <h2> Using the <i> !important </i> with CSS property values </h2>
   <div class = "initial">
      This is an initial Div element.
   </div>
   <div class = "middle">
      This is a middle Div element.
   </div>
   <div class = "final">
      This is a final Div element.
   </div>
</body>
</html>

Copy after login

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.

The above is the detailed content of Why should we use !important?. For more information, please follow other related articles on the PHP Chinese website!