Making a Declaration !important The !important declaration can be added to a property-value declaration to give it the maximum weight when determining the cascade order. This ensures a declaration is applied regardless of what other rules are in play (see "Determining the Cascade Order" later in this chapter). Figure 2.22 shows the basic syntax for using !important. Figure 2.22. The general syntax for making a declaration important. 
In this example (Figure 2.23), declarations made for the paragraph tag would normally be overridden by declarations in the .authorName class when that class is applied to the <p> tag, since its declarations come later in the code. However, if declarations for the <p> tag are made important, they will always be used, as is the case with the color red in this example. Figure 2.23. Despite the fact that the .authorName class comes after the <p> tag rule, because the color declaration for paragraphs has been designated as important, it overrules the color declaration in the .authorName class. 
To force a declaration to be used always: | | 1. | p {...}
Create a CSS rule with a selector and curly brackets (Code 2.12). You can use an HTML, class, or ID selector. CSS rules can be defined within the style tags in the head of your document (see "Adding Styles to a Web Page" earlier in this chapter) or in an external CSS file that is then imported or linked to the HTML document (see "Adding Styles to a Web Site" earlier in this chapter).
Code 2.12. Add !important to a style declaration if you want to guarantee that it is the style applied, regardless of the cascade order.| [View full width] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/  xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML & Ajax | Making a Definition !important</title> <style type="text/css" media="screen"> body { font: 1.2em Georgia, 'Times New Roman', times, serif; color: #000000; background-color: #fff; margin: 8px; } p { color: red !important; font-family: Georgia, 'Times New Roman', times, serif; font-size: 1em; } p.authorName { color: black; font-family: arial, helvetica, geneva, sans-serif; font-size: 1.5em; } </style> </head> <body> <div > <div > <h1>Alice's Adventures in Wonderland</h1> <p >Lewis Carroll</p> <h2>Chapter V<br /> <span >Advice from a Caterpillar</span> </h2> </div> <div > <p>The Caterpillar and Alice looked at each other for some time in silence: at last the Caterpillar took the hookah out of its mouth, and addressed her in a languid, sleepy voice.</p> </div></div> </body></html>
|
| 2. | color: red !important;
Type a style declaration, a space, !important, and a semicolon (;) to close the declaration.
| | | 3. | font-size: 1em;
Add any other declarations you desire for this rule, making them !important, or not, as you desire.
| 4. | p.authorName{...}
Add any other rules you want, designating their declarations !important as needed.
|
 Tips
Setting a shorthand property to !important (for example background) is the same as setting each individual sub-property (for example backgroundcolor) to be !important. One common mistake is to locate !important after the semicolon in the declaration. This causes the browser to ignore the declaration and, possibly, the whole rule. If you are debugging your style sheet and can't get a particular style to work, try adding !important to it. If it still doesn't work, then most likely the problem is a typo rather than another style overriding it. Many browsers allow users to define their own style sheets for use by the browser. Most browsers follow the CSS 2.1 specification in which a user-defined style sheet overrides an author-defined style sheet.
|
