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?
!important - what does it do?
Moderator: General Moderators
- RobertGonzalez
- Site Administrator
- Posts: 14293
- Joined: Tue Sep 09, 2003 6:04 pm
- Location: Fremont, CA, USA
I think Feyd hit it on the head.W3C Manual on CSS2 wrote:Style sheets may have three different origins: author, user, and user agent.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.
- 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.
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.
It's often usefull in situations when you are confused about why a change to a certain element's style:
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:
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.
Code: Select all
p.someclass { color: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; }
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.
- Chris Corbyn
- Breakbeat Nuttzer
- Posts: 13098
- Joined: Wed Mar 24, 2004 7:57 am
- Location: Melbourne, Australia