How to apply !important in CSS?

Last Updated : 13 Jun, 2024

The !important rule in CSS is used to add more importance to a property/value than normal. It forces a style to override any other declarations, ensuring the specified property value is applied, regardless of specificity. It helps resolve conflicts but should be used sparingly to avoid complicating stylesheet management.

Syntax:

element {
    color: blue  !important;
    font-size: 14px !important; 
    ...
}

Example 1: In this example, we use CSS to set a <h1> color to white with !important, overriding blue. The body has a yellow background, despite a green !important due to later definition.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Document</title>
    <style>
        h1 {
            color: blue;
        }

        h1 {
            color: white !important;
        }

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

<body>
    <h1>GeeksforGeeks</h1>
    <h2>!important property</h2>
</body>

</html>

Output: important property

Example 2: In this example demonstrates the !important CSS property, which forces styles like color, size, and background. Despite conflicting rules, !important ensures elements .geeks and #gfg follow specified styles.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>!important property</title>
    <style>
        .geeks {
            color: green !important;
            size: 10ex !important;
            background-color: lightgray !important;
        }

        .geeks {
            color: red;
            size: 100ex;
            text-align: justify;
            background-color: purple;
        }

        h1,
        h2 {
            text-align: center;
        }

        h1 {
            color: green;
        }

        body {
            width: 65%;
            margin-left: 15%;
        }

        #gfg {
            color: lightgreen !important;
            size: 10ex !important;
            text-align: justify !important;
            background-color: darkgreen !important;
        }

        #gfg {
            color: orange;
            size: 1000ex;
            background-color: magenta;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h2>!important property</h2>
    <div class=geeks>
        A Computer Science portal for geeks.
        It contains well written, well thought and well explained
        computer science and programming articles and quizzes.
    </div>
    <div id=gfg>
        <p>
            Computer programming is the process of writing
            instructions that get executed by computers. The
            instructions, also known as code, are written in
            a programming language which the computer can
            understand and use to perform a task or solve a
            problem.
        </p>
    </div>
</body>

</html>

Output:

CSS is the foundation of webpages, is used for webpage development by styling websites and web apps. You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.

CSS Text Formatting

Kanishk_Verma

Improve

Article Tags :

How to apply !important in CSS?

Similar Reads

What kind of Experience do you want to share?