Skip to content
Related Articles

Related Articles

How to override the CSS properties of a class using another CSS class ?
  • Difficulty Level : Medium
  • Last Updated : 27 Sep, 2019

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:




<!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>


Output:
!important_output




My Personal Notes arrow_drop_up
Recommended Articles
Page :