⚠️ CSS !important Rule

? Quick Overview

The CSS !important rule is used to give a specific property the highest priority in the cascade. When multiple CSS rules target the same element and property, the one marked with !important will win—even over inline styles or more specific selectors. Because it is so powerful, it should be used carefully, only when you really need to force a style.

? Key Concepts

• Overrides normal cascade: !important beats normal rules, even if they are more specific.
• Inline vs external: A rule with !important can override inline styles without !important.
• Specificity still matters: If two rules both use !important, the one with higher specificity wins.
• Harder to debug: Overusing !important can make your CSS confusing and difficult to maintain.
• Best used rarely: Good CSS architecture (proper selectors, ordering, and components) usually removes the need for !important.

? Syntax & Theory

The !important keyword is written at the end of a property value, just before the semicolon. It works with any CSS property and tells the browser, “apply this value even if other rules try to override it.”

/* Basic syntax for the !important rule */
selector {
property: value !important;
}

Under the hood, the browser still uses the normal cascade and specificity rules, but !important acts like an extra boost. When multiple !important rules apply to the same property, specificity and source order are used to break the tie.

? Example 1 — Overriding a Normal Rule

In this example, both rules target the same paragraph. The second rule uses !important, so it wins even though the first rule appears later in the stylesheet.

/* First rule: sets paragraph text to blue */
p {
color: blue;
}

/* Second rule: !important makes the text red instead */
p {
color: red !important;
}

? Example 2 — Overriding Inline Style

Normally, inline styles have higher priority than external or internal stylesheets. But a stylesheet rule with !important can even override inline styles that do not use !important.

/* Stylesheet rule with !important */
p {
color: red !important;
}

<!-- HTML with inline style trying to set blue color -->
<p style="color: blue;">This paragraph will look red when the CSS above is applied.</p>

⚔️ Example 3 — When Two !important Rules Clash

If two rules for the same element and property both use !important, then specificity and order in the stylesheet decide the winner.

/* Class selector with !important */
.title {
color: green !important;
}

/* ID selector with !important (higher specificity) */
#mainTitle {
color: orange !important;
}

<!-- HTML element using both the ID and class -->
<h1 id="mainTitle" class="title">CSS !important Example</h1>