Hi all,

Can anyone explain about, what is the purpose of using !important rule in CSS

__________________
Regards,
VELHARI
I am not totally useless. I can be used for a bad example

Hi

! important

Rules can be designated as important by specifying ! important. A style that is designated as important will win out over contradictory styles of otherwise equal weight. Likewise, since both author and reader may specify important rules, the author's rule will override the reader's in cases of importance.

A sample use of the ! important statement:

BODY { background: url(bar.gif) white;
background-repeat: repeat-x ! important }

ThankQ
KiruthikaSambandam

!important CSS rule


Cascading Style Sheets cascade. This means that the styles are applied in order as they are read by the browser. The first style is applied and then the second and so on. What this means is that if a style appears at the top of a style sheet and then is changed lower down in the document, the second instance of that style will be the one applied, not the first. For example, in the following style sheet, the paragraph text will be black, even though the first style property applied is red:

p { color: #ff0000; }
p { color: #000000; }

The !important rule is a way to make your CSS cascade but also have the rules you feel are most crucial always be applied. A rule that has the !important property will always be applied no matter where that rule appears in the CSS document. So if you wanted to make sure that a property always applied, you would add the !important property to the tag. So, to make the paragraph text always red, in the above example, you would write:

p { color: #ff0000 !important; }
p { color: #000000; }

User Style Sheets

However, the !important rule was also put in place to help Web page users cope with style sheets that might make pages difficult for them to use or read. Typically, if a user defines a style sheet to view Web pages with, that style sheet will be over-ruled by the Web page author's style sheet. But if the user marks a style as !important, that style will overrule the Web page author's style sheet, even if the author marks their rule as !important.

This is a change from CSS1 to CSS2. In CSS1, author !important rules took precedence over user !important rules. CSS2 changed this to make the user's style sheet have precedence.

ThankQ
Sathian.K

CSS tries to create a balance of power between author and user style sheets. By default, rules in an author's style sheet override those in a user's style sheet.

However, for balance, an "!important" declaration takes precedence over a normal declaration. Both author and user style sheets can contain "!important" rules, but user "!important" rules override author "!important" rules.

Note: In CSS1, it works the other way: Author "!important" rules took precedence over user "!important" rules.

If you, in your style sheet want to mark something as important, use the following code:

P { font-size: 18pt ! important }