!important Rules in stylesheet
In this blog I am trying to explain the concept of
!important rules in stylesheet.
Along with the need for the cascade in CSS came the need to
override it. This is where !important rules come in. The !important syntax
appears within a declaration, after the property value and before the
semi-colon that terminates the declaration. Two components make up this syntax;
an exclamation mark, used here as a delimiter, and the important keyword. A
delimiter marks the ending of the thing and the beginning of another. Here the
exclamation mark singles the end of the declaration. The important keyword must
appear next, followed by a semicolon to terminate the declaration;
Example code: -
Enter the following markup into your text
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<title>Mindstick Demo By Vijay Shukla</title>
!important rules are used to override
specificity. The !important syntax causes
a selector to have<span id="precedence">
greater oprecedence than those without it.
</span>It also <span style="background: lightblue;">has
greater precedence than the
(X)HTML style attribute</span>
Save the preceding document.
Run the demo.
How it works:
In this demo you see how the !important rule overrides
precedence. Because the following declaration contains the !important systax,
it causes the background of all the <span> elements to be orange.