The !important rule specifies that the specific rule it is appended to, will always be applied no matter where it lies within the cascade of the stylesheet(s).


For instance, say you had a master style sheet with a rule:


p { color:#FF0000; }


and you then used an @import to style a specific page, followed by a new rule to override the original p style:


@import 'style.css' ;

p { color:#0000FF; }


It would then be expected that the new rule would override the master's style.css p rule and colour p elements blue (#0000FF) for that page.


However, the !important directive can be applied within the master style.css to ensure it is always applied, no matter if a new rule is defined for it, by appending !important to it like so:


p { color:#FF0000 !important; }


Now, any future definitions of the p element styling will not have any effect and the original p styling will always be applied.

Leave a Reply