Why should we use !important ?

Last Updated : 30 May, 2023

In this article, we will learn about the “!important” property & its usage in CSS. This property is used to override the specific style property over the same style property by specifying the !important at the end of the styling.

!important property:

The !important property in CSS is used to provide more weight (importance) than normal property. In CSS, the !important means that “this is important”, ignore all the subsequent rules, and apply !important rule and the !important keyword must be placed at the end of the line, immediately before the semicolon.

In normal use, a rule defined in an external style sheet is overruled by a style defined in the head of the document, which in turn, is overruled by an inline style within the element itself (assuming equal specificity of the selectors).
This property is used to specify a particular style as a key style to which it is applied.
If a style is specified with the !important property then that particular style will be applied to the element, not any other style of the same name.
If !important property is added to any style, that applied style takes higher precedence.

Syntax:

element-name {
    style-name : stylings !important;
}

Example 1: Change the background using the important property.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>GeeksforGeeks</title>
    <style>
        body {
            background-color: green !important;
            background-color: red;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
 
    <p>Use of !important property</p>
 
</body>
</html>

Here, we have used the !important property at green background hence its priority is considered as higher in priority.

Output:

Example 2: Change text color using the important property.

HTML

<html>
<head>
    <title>GeeksforGeeks</title>
    <style>
        h1 {
            color: green !important;
            color: black;
        }
 
        #text {
            color: yellow;
        }
    </style>
</head>
 
<body>
    <h1 id="text">GeeksforGeeks</h1>
 
    <p>Use of !important property</p>
 
</body>
</html>

Here, we have used the !important property at green text color on the style of h1 tag and we have also changed the text color to yellow with the help of id property but the priority of important is considered as higher in priority and it changes the text color black to green not to yellow.

Output: