Question

How is the CSS attribute property !important read?

Is it really important, exclamation mark important, …?

Answer: From the answers below, it seems to be read simply important, or bang important.

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.