CSS: !important

What is the !important keyword

The !important keyword marks a style rule to override all other conflicting rules.

Syntax

the !important keyword must be at the end of a rule, immediately before the semicolon.

p {
 color: red !important;
}

The priority of !important

Rules with important flag take priority over any other rules.

but when 2 rules are both declared important, the priority is this, from lowest priority to high:

1. !important in website style sheet. (lowest priority)
2. !important in user style sheet
3. !important browser style sheet

note the reverse of order of origin, when compared to normal cascade.

Within the same origin + importance level, the rest of the cascade still applies:

1. Cascade layers (order is also reversed for !important)
2. Specificity
3. Source order (later wins)

Tip: do not use important

🟢 TIP: do not use the !important, because it makes your CSS hard to maintain once you have more than one.