Important Rule

When there is a specicifity conflict between 2 selectors that may have same specicifity value

Mainly used for debugging when conflict may occur

Way of making css cascade but also have the rules u think crucial always applied
If has the important property - will always be applied - no matter where the rule appears within the document or conflict occurs

head>
meta ...
link href="styles.css" rel="stylesheet" type="text/css" />
title>!important /title>
/head>

body>
div id="important">
p>text text /p>


/div>

/body>



Style sheet - conflict
p {color:#0C0;}
p {color:#F00;}
second rule is applied -

p {color:#0C0 !important;}
p {color:#F00;}the important rule overrides any conflict

#important p {color:#0C0;}
p {color:#F00 !important;}

if rule is not being applied - try the important rule
if still nothing happens - check for typos/selectors

the more !importants in doc - the more problems site can have

preferable use to debug - then fix the proper way