CSS !important

The !important rule in CSS is used to add more importance to a property/value than normal. In fact, if you use the !important rule, it will override all previous styling for that specific property on that element.

Basic Syntax

The rule is added to the end of a value, before the semicolon.

p {
    color: red !important;
}

The Overriding Power

Imagine you have an ID selector (very high specificity) and a simple element selector with !important. The element selector will win.

#header {
    color: blue;
}

p {
    color: red !important; /* This wins, even though #header is an ID! */
}

The Danger of !important

Using !important is generally considered bad practice because it makes debugging harder by breaking the natural cascading behavior of CSS. If you need to override a !important, you have to use another !important with higher specificity, leading to "specificity wars".

When should you use it?

• External CSS: When you need to override styles from a library (like Bootstrap) that you cannot edit directly.
• Utility Classes: For single-purpose classes like .hide { display: none !important; } where you always want that behavior regardless of context.