CSS Important

Introduction

In CSS, !important is a keyword that can be added to a style declaration to give it higher specificity, overriding any other styles that conflict with it. When a style rule includes !important, it takes precedence over other rules, regardless of their specificity.

How CSS Important Works

Override Priority CSS

When applied to a style declaration, !important gives it the highest priority, ensuring that it overrides any conflicting styles, regardless of their specificity.

Use Cases

Use !important when you need to ensure a specific style applies consistently, even if other styles might try to override it. However, use !important sparingly, as overuse can make CSS code difficult to maintain and debug.

Syntax

!important is added to the end of a style declaration, immediately before the semicolon.

For example

.button {
  background-color: #8c8c8c !important; 
  color: white !important;
  padding: 5px !important;
  border: 1px solid black !important; 
}

#myDiv a {
  color: red;
  background-color: yellow;  
}

Caveats

While !important can be useful for overriding styles in certain cases, it should be used judiciously. Over-reliance on !important can lead to specificity wars and make it harder to debug and maintain CSS code. Whenever possible, it’s best to use specific selectors and avoid the need for !important.

.button {
  background-color: #8c8c8c !important; 
  color: white !important;
  padding: 5px !important;
  border: 1px solid black !important; 
}

#myDiv a {
  color: red;
  background-color: yellow;  
}

output

Frequently Asked Question