How to override the CSS properties of a class using another CSS class ?

To override the CSS properties of a class using another class, we can use the !important directive. In CSS, !important means “this is important”, and the property:value pair that has this directive is always applied even if the other element has higher specificity.

Syntax:

element1 {
    property-x: value_y  !important; /* This will be applied. */
}
element2 {
    property-x: value_z; /* This will not be applied. */
}

Example:



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>!important</title>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1">
    <link rel="stylesheet" 
          href=
    <link href=
          rel="stylesheet">
    <link href=
          rel="stylesheet">
    <style>
        h1 {
            text-align: center;
            color: green;
        }
          
        .my_fav_font {
            font-family: 'Indie Flower', cursive !important;
            /* This will be applied. */
        }
          
        .my_para {
            font-family: 'Mansalva', cursive;
            /* This will not be applied. */
            text-align: justify;
            background-color: powderblue;
            font-size: 130%;
        }
    </style>
</head>
  
<body>
    <div class="container">
        <h1>GeeksforGeeks</h1>
        <hr/>
        <p class="my_fav_font my_para">Cascading Style Sheets,
        fondly referred to as CSS, is a simply designed language
        intended to simplify the process of making web pages
        presentable. CSS allows you to apply styles to web pages.
        More importantly, CSS enables you to do this independent 
        of the HTML that makes up each web page.</p>
    </div>
</body>
  
</html>

chevron_right


Output:
!important_output



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.