It means, essentially, what it says; that 'this is important, ignore subsequent rules, and any usualspecificity issues, applythis rule!'

In normal use a rule defined in an external stylesheet is overruled by a style defined in thehead of the document, which, in turn, is overruled by an in-line style within the element itself (assuming equal specificity of the selectors). Defining a rule with the!important 'attribute' (?) discards the normal concerns as regards the 'later' rule overriding the 'earlier' ones.

Also, ordinarily, a more specific rule will override a less-specific rule. So:

a {    /* css */}

Is normally overruled by:

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

As the latter selector is more specific (and it doesn't, normally, matter where the more-specific selector is found (in thehead or the external stylesheet) it willstill override the less-specific selector (in-line style attributes willalways override the 'more-', or the 'less-', specific selector as it'salways more specific.

If, however, you add!important to the less-specific selector's CSS declaration, it will have priority.

Using!important has its purposes (though I struggle to think of them), but it's much like using a nuclear explosion to stop the foxes killing your chickens; yes, the foxes will be killed, but so will the chickens. And the neighbourhood.

It also makes debugging your CSS a nightmare (from personal, empirical, experience).

The !important rule is a way to make your CSS cascade but also havethe rules you feel are most crucial always be applied. A rule that hasthe !important property will always be applied no matter where thatrule appears in the CSS document.

So, if you have the following:

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

the rule with the important will be the one applied (not countingspecificity)

I believe!important appeared in CSS1 so every browser supports it (IE4 to IE6 with a partial implementation, IE7+ full)

Also, it's something that you don't want to use pretty often, because if you're working with other people you can override other properties.

!important is a part of CSS1.

Browsers supporting it: IE5.5+, Firefox 1+, Safari 3+, Chrome 1+.

It means, something like:

Use me, if there is nothing important else around!

Cant say it better.

It is used to influence sorting in the CSS cascade when sorting by origin is done.It has nothing to do with specificity like stated here in other answers.

Here is the priority from lowest to highest:

1. browser styles
2. user style sheet declarations (without !important)
3. author style sheet declarations (without !important)
4. !important author style sheets
5. !important user style sheets

After that specificity takes place for the rules still having a finger in the pie.

References:

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

It changes the rules for override priority of css cascades. Seethe CSS2 spec.

Before @layer was introduced, it was commonly used to override specificty and force a rule to be applied. It was, and is, confusing and can be difficult to control. With layered rules, which are supported by all major browsers, it becomes much much easier to control how rules are applied. If you're starting a new project you should definitely use layers. Converting to layers is very doable but non-trivial. I converted all my projects to use the layered approach, don't use !important at all and have found it extremely easy to confrol and understand. See the description athttps://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@layer

• css