CSS !important


CSS !important

The !important rule in CSS is used to override other style rules that are less specific or come from lower-priority sources. It’s a way to enforce a particular style declaration, making it more important than any other declarations for the same CSS property on an element.

How It Works

When you add !important to a CSS property, it becomes the most important rule for that specific property on that element. This means it overrides any other styles set in CSS, whether they’re inline styles, internal styles, or even external stylesheets.


The !important declaration is added at the end of a CSS property value, before the semicolon, like this:
selector {
property: value !important;

CSS Example HTML Example Description
.element { color: red !important; } <div class=”element” style=”color: blue;”> This text will be red, not blue. </div> Despite the inline style setting the color to blue, the !important rule in the external CSS forces the text to be red.
.element { font-size: 14px !important; } <div class=”element” style=”font-size: 12px;”> This text will have a font size of 14px. </div> The font size is set to 14px by the CSS, overriding the inline style of 12px due to the !important declaration

Best Practices and Considerations

– Avoid Overuse: Overusing !important can lead to maintenance issues and make your CSS harder to debug. It should be used sparingly and only when absolutely necessary.
– Specificity Wars: Relying on !important can create a situation where you’re forced to use more !important declarations to override previous ones. This can quickly become unwieldy.
– Use for Utility Classes: Some developers find it useful in utility classes that are meant to have a single, overriding purpose.

Course Video

YouTube Reference