Override the CSS Properties of a Class using another CSS Class

Last Updated : 22 May, 2026

CSS allows developers to control the styling and layout of web pages efficiently. Sometimes, it becomes necessary to override one CSS class with another to apply different styles to specific elements or resolve conflicts in stylesheets.

  • CSS class overrides are commonly used when working with frameworks like Bootstrap.
  • Specificity, order of styles, and !important play a key role in overriding styles.
  • Proper use of overrides helps maintain clean and manageable CSS code.

Reasons to Override CSS Properties

There are many instances that require you to override CSS properties.

  • Customization: You may want to customize styles applied to specific elements without changing the default stylesheet.
  • Third-party conflicts: When using frameworks or libraries, you may need to override their default styles.
  • Specificity: You want to be sure that the intended styles wins out in cases where multiple rules apply to the same element

Method 1: Overriding with the !important Directive

The !important directive in CSS ensures a style declaration takes precedence over others, regardless of specificity. It's used to enforce a specific style, overriding any conflicting styles defined elsewhere, thus ensuring consistency and control.

Syntax:

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

Example: Implementation to show to override the CSS properties by using !important property.

html 
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>

<head>
    <title>Using !important property</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link
        href="https://fonts.googleapis.com/css?family=Indie+Flower&display=swap"
        rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Mansalva&display=swap"
        rel="stylesheet">
<!--Driver Code Ends-->

    <style>
        h1 {
            text-align: center;
            color: green;
        }

        .container {
            width: 95%;
            margin: 10px;
            padding: 10px;
        }

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

<!--Driver Code Starts-->
</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>
<!--Driver Code Ends-->

Best Practices

  • Use sparingly: Overusing !important can lead to a messy and hard-to-maintain stylesheet.
  • Last resort: Try to solve specificity issues with more specific selectors first.
  • Check for conflicts: Use your browser's developer tools to inspect elements and identify any unexpected style overrides.

Method 2: Using a More Specific Selector

Using a specific selector in CSS overrides styles by targeting elements more precisely. By specifying a more specific selector, such as an ID or nested class, styles can be applied selectively, ensuring that the desired properties take precedence over others.

Syntax:

 /* Original style */
 .container {
     background-color: lightblue;
}
/* Override with specific selector */
 #special-container .container {
     background-color: lightgreen;
}

Example : Implementation to show to override the CSS properties by using specific selector and then overriding.

HTML 
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>

<head>
    <title>Without Using !important</title>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link href=
"https://fonts.googleapis.com/css?family=Indie+Flower&display=swap" 
          rel="stylesheet">
    <link href=
"https://fonts.googleapis.com/css?family=Mansalva&display=swap" 
          rel="stylesheet">
<!--Driver Code Ends-->

    <style>
        .body-style {
            text-align: center;
            font-family: 'Indie Flower', cursive;
            /* Apply font to body directly */
        }

        .my_para {
            font-family: 'Mansalva', cursive;
            text-align: justify;
            background-color: powderblue;
            font-size: 130%;
            /* Overriding property */
            color: red;
        }
    </style>

<!--Driver Code Starts-->
</head>

<body class="body-style">
    <div class="container">
        <h1>GeeksforGeeks</h1>
        <hr />
        <p class="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>

<!--Driver Code Ends-->

Best Practices

  • Avoid IDs: They’re too specific and hard to override later.
  • Combine selectors: Nest classes or use multiple classes to increase specificity.
  • Order matters: If two selectors have the same specificity, the one declared later in the CSS file will take precedence.
Comment

Explore