Page 1 of 1

!important - what does it do?

Posted: Fri Aug 25, 2006 6:27 pm
by Luke
I am trying to understand what !important does in CSS, and I found this page:
http://www.w3.org/TR/REC-CSS2/cascade.html#cascade

But I still am not quite getting it... what does it to?

Posted: Fri Aug 25, 2006 6:34 pm
by feyd
If I understand it correctly under normal circumstances the precedence of styles is "author" (page style) > "user" (personal style) > "default" (browser's style), but with !important added the precendence is "user" > "author" > "default".

Posted: Fri Aug 25, 2006 6:40 pm
by RobertGonzalez
W3C Manual on CSS2 wrote:Style sheets may have three different origins: author, user, and user agent.
  • Author. The author specifies style sheets for a source document according to the conventions of the document language. For instance, in HTML, style sheets may be included in the document or linked externally.
  • User: The user may be able to specify style information for a particular document. For example, the user may specify a file that contains a style sheet or the user agent may provide an interface that generates a user style sheet (or behave as if it did).
  • User agent: Conforming user agents must apply a default style sheet (or behave as if they did) prior to all other style sheets for a document. A user agent's default style sheet should present the elements of the document language in ways that satisfy general presentation expectations for the document language (e.g., for visual browsers, the EM element in HTML is presented using an italic font). See "A sample style sheet for HTML 4.0" for a recommended default style sheet for HTML 4.0 documents.
Note that the default style sheet may change if system settings are modified by the user (e.g., system colors). However, due to limitations in a user agent's internal implementation, it may be impossible to change the values in the default style sheet.

Style sheets from these three origins will overlap in scope, and they interact according to the cascade.

The CSS cascade assigns a weight to each style rule. When several rules apply, the one with the greatest weight takes precedence.

By default, rules in author style sheets have more weight than rules in user style sheets. Precedence is reversed, however, for "!important" rules. All rules user and author rules have more weight than rules in the UA's default style sheet.
I think Feyd hit it on the head.

Posted: Sat Aug 26, 2006 4:14 am
by matthijs
It's often usefull in situations when you are confused about why a change to a certain element's style:

Code: Select all

p.someclass { color:red; }
doesn't result in that piece of HTML getting red.

Then you'll just throw in some !importants and voila! your element is rendered red.

So this saves you from having to understand the CSS cascade and the weight all the rules get. In this example, you should have seen this rule somewere else in your stylesheet:

Code: Select all

#div p { color:blue; }
And you should have known that #div p gets a higher weight then .someclass, and that that was the reason your p element stayed blue...

So to be honest: in this example you shouldn't have to use !important at all. I was a bit sarcastic. I'm just giving this example because the !important rule is sometimes abused.

Posted: Sat Aug 26, 2006 8:18 am
by Chris Corbyn
Wow... I learn something new every day :)

Posted: Sat Aug 26, 2006 1:30 pm
by Luke
d11wtq wrote:Wow... I learn something new every day :)
:D This place is awesome, huh?