What does important mean in css

!important is a special declaration in CSS that elevates the priority of a CSS rule. When multiple styles conflict—meaning multiple rules apply to the same property of the same element—the cascade determines which rule is ultimately applied. The cascade considers factors such as the order of source code, selector specificity, and inheritance.

Using !important can override other rules in the cascade, even if those rules have higher specificity or appear later in the source code. This means that inline styles can be overridden by rules in a stylesheet that uses !important, as inline styles typically have higher priority.

However, excessive use of !important can make CSS difficult to maintain, as it disrupts the natural cascading behavior of CSS. It is generally advised to use !important only when necessary, such as when overriding styles of third-party components and no other approaches are viable.

For example, consider a button on a page that is typically blue but should be red in a specific module. You might write CSS as follows:

css
/* General styles applied to all buttons */
.button {
    color: blue;
}
/* Button color for the specific module */
.module .button {
    color: red !important;
}

When rules are sorted by their origin, !important is used to influence the cascade order. It is unrelated to specificity, as mentioned in other answers.

The following is the priority order from lowest to highest:

1. User agent styles
2. User styles (without !important)
3. Author styles (without !important)
4. Author styles with !important
5. User styles with !important

After this, specificity still applies.

References:

• http://www.w3.org/TR/CSS2/cascade.html#cascade
• https://russmaxdesign.github.io/maxdesign-slides/02-css/207-css-cascade.html

The !important rule is a mechanism to override the CSS cascade, ensuring that your most critical rules are always applied, regardless of their position in the CSS document.

So, if you have the following scenario:

css
.class {
  color: red !important;
}
.outerClass .class {
  color: blue;
}

The !important rule will be applied (without considering specificity).

I believe !important was introduced in CSS1 and is supported by all browsers (partially implemented in IE4 to IE6, fully in IE7+).

Additionally, you shouldn't use it frequently because when working with others, it can override other properties.

At its core, it means exactly what it says: 'This is important; ignore subsequent rules and any common specificity issues, apply this rule!'

In normal usage, rules defined in external style sheets are overridden by styles defined in the head document, and styles defined in the document are overridden by inline styles within the element (assuming selectors have the same specificity). Using !important in CSS declarations eliminates the normal concern that later rules override earlier rules.

Additionally, more specific rules typically override less specific ones. For example:

css
a {
    /* css */
}

is usually overridden by:

css
body div #elementID ul li a {
    /* css */
}

Since the latter selector is more specific (typically, where you find the more specific selector in the stylesheet or external stylesheet in the head is irrelevant), it will still override less specific selectors. Inline styles will always override more-specific or less-specific selectors because it is always more specific.

However, if you add !important to the CSS declaration of a less specific selector, it will take precedence.

Using !important has its purpose (though I can't think of any), but it's like using a nuclear explosion to stop foxes from killing your chickens; yes, the foxes are killed, but the chickens are too. And the neighbors.

It also makes debugging CSS a nightmare (based on personal experience).