CSS Important

Last Updated : 7 Aug 2026

The !important rule in CSS is used to give a CSS declaration higher priority than normal declarations. When a property is marked with !important, it takes precedence over other declarations of the same property, regardless of the normal CSS cascade.

In this chapter, you will learn what the !important rule is, its syntax, how it works, and how to use it with examples.

What is !important in CSS?

The !important rule is a special keyword that increases the priority of a CSS declaration. It is added after the value of a CSS property.

Normally, when multiple CSS rules target the same element, the browser determines which rule to apply based on the CSS cascade, selector specificity, and source order. However, if a declaration is marked with !important, it overrides normal declarations for the same property.

Although !important is useful in certain situations, it should be used only when necessary. Excessive use of !important makes CSS difficult to understand, maintain, and debug.

Syntax of !important

The following syntax is used to apply the !important rule.

selector {
    property: value !important;
}

In this syntax:

selector specifies the HTML element to be styled.
property specifies the CSS property.
value specifies the value assigned to the property.
!important increases the priority of the declaration.

How !important Works

When two or more CSS rules define different values for the same property, the browser normally follows the CSS cascade to determine which value to apply.

If one of those declarations is marked with !important, that declaration is given higher priority than normal declarations.

If multiple declarations use !important, the browser again follows the normal cascade rules such as specificity and source order to determine the final value.

Example 1: Using !important

The following example demonstrates how the !important rule overrides normal CSS declarations.

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
    color: white;
}

h1 {
    color: blue !important;
}

body {
    background-color: lightblue !important;
    text-align: center;
    background-color: yellow;
}
</style>
</head>
<body>

<h1>Hello World.</h1>
<h1>Welcome to the TpointTech.com. This is an example of <i>!important</i> property.</h1>

<p></p>

</body>
</html>

Explanation

In this example:

The second h1 rule uses color: blue !important;, so the heading is displayed in blue instead of white.
The body element has two background colors. Although background-color: yellow; appears later, the browser applies light blue because it is marked with !important.

Using !important with Different CSS Properties

The !important rule can be applied to almost any CSS property, such as color, background-color, border, margin, padding, and font-size.

Example

p {
    color: red !important;
    font-size: 18px !important;
}

Explanation

In this example, both the color and font-size declarations have higher priority than normal declarations for the same properties.

When to Use !important

The !important rule should be used only when a declaration must override other CSS rules.

Some common situations include:

Overriding styles from third-party CSS libraries.
Applying utility classes that must take precedence.
Resolving unavoidable style conflicts in large projects.

In most cases, using more specific selectors is preferred over relying on !important.

Example 2: Multiple !important Declarations

The following example demonstrates the use of the !important rule with multiple CSS properties.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{
    text-align: center;
}

h1{
    border-color: red !important;
    border: 5px green solid;
    border-color: black;
}

h2{
    color: green !important;
    color: red;
    border-color: violet !important;
    border: 5px green solid;
}
</style>
</head>

<body>

<h1>Hello World :) :)</h1>
<h2>Welcome to the javaTpoint.com</h2>

</body>
</html>

Explanation

In this example:

The border-color of the <h1> element remains red because it is marked with !important, even though another border-color declaration is present.
The <h2> element displays green text because color: green !important; overrides the later color: red; declaration.
The border color of the <h2> element remains violet because it is also marked with !important.

Next TopicCSS Background-color

← prev next →

We deliver comprehensive tutorials, interview question-answers, MCQs, study materials on leading programming languages and web technologies like Data Science, MEAN/MERN full stack development, Python, Java, C++, C, HTML, React, Angular, PHP and much more to support your learning and career growth.