How do you read !important in CSS? [duplicate]

Answer 1

an "!important" declaration (the delimiter token "!" and keyword "important" follow the declaration) takes precedence over a normal declaration.

http://www.w3.org/TR/CSS2/cascade.html#important-rules

Basically, where two style rules are the same... it gives the one marked !important greater importance and will apply those styles.

Example

div{
    opacity:0 !important;
}

div.jason{
    opacity:1;
}

The first rule would be applied even though the second rule is more specific (one element + one class as opposed to one element)

Note: IE6 ignores !important when you have two of the same property and one of them is important - it'll always apply the last declaration, whether or not it was marked important. **Added from @BoltClock's comment below.

Warning: !important is a hammer that should only be used when absolutely necessary. Almost always, it is better to use more specific selectors to achieve greater specificity and have your styles applied the way you want. !important can make it very difficult for future developers to find and make changes to your code.

One good use case: !important is great for user-defined styles, where a user wants to manipulate Web site pages in specific way in his browser (say make all the backgrounds black and the text yellow). Without having to worry about specificity, the user can add styles to certain elements (like body) and make the styles render.

Answer 2

body { color: red !important; } means, in English, "The text-color of red is important".

In terms of how CSS sees it, it applies more "weight" to that declaration, so it will be (far) more likely to be the applied style.

For an example of this, we can use

p { color: red; }
p.blue { color: blue; }

Now, any p with a class of blue will show blue text, all the others will show red text. If we change it to this...

p { color: red !important; }
p.blue { color: blue; }

They will all show red text (even if they have a class of blue), as we've given more important to the first selector.

Answer 3

Just "important" or "bang important." The ! is definitely not a negation in this case.

---

It's not a tag, it's a keyword.

Answer 4

I guess I read the ! as "very".

p { color: red !important }

I read as "Paragraphs have the color red, which is very important.

Answer 5

I like to think of it as "NOT important".

p { 
    color: red !important; /* The rest is NOT important for this CSS property. */
} 

Meaning that everything else from that declaration and on is NOT important and should not be taken into account. The idea came from the usage of the "!" character as a boolean NOT in many programming languages. This way the !important makes sense as you read it.