How to apply !important in CSS?

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.

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.

Output:

👁 Image

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.