How to Override the CSS Properties of a Class using another CSS Class? (original) (raw)

Last Updated : 25 Sep, 2024

To override CSS properties with another class, use the `!important` directive in CSS, emphasizing a style’s importance, and overriding others. Applying a new class to an element replaces or modifies styles from its original class, allowing targeted adjustments to appearance, layout, or behavior.

Below are the approaches to override CSS properties of class:

Table of Content

• Using !important property
• Using specific selector

Using !important property

The !important property 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 `