This chapter is from the book
This chapter is from the book
This chapter is from the book
Making a Declaration !important
You can add the !important declaration to a property-value declaration to give it the maximum weight when determining the cascade order 
. Doing so ensures that a declaration is applied regardless of the other rules in play. (See “Determining the Cascade Order” in this chapter.)
)
To force use of a declaration
- Add your CSS rule (Code 4.20).
h2 {...}Code 4.20. The !important value has been added to the color property in the first h2, but not in the second
. Typically, the second h2 would override the first, but not in this case.<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Alice’s Adventures in Wonderland</title> <style type="text/css" media="all"> h2 { color: green !important; font-size: 3em; } h2 { color: red; font-size: 2em; } </style> </head> <body> <article class="chaptertext"> <h2> Chapter I <span class="chaptertitle">Down the Rabbit-Hole</span> </h2> <p>Alice was beginning to get very tired of sitting by her sister on the bank, and of → having nothing to do: once or twice she had peeped into the book her sister → was reading, but it had no pictures or conversations in it, <q>and what is the → use of a book,</q> thought Alice, <q>without pictures or conversations?</q></p> </article> </body> </html> The result of Code 4.20. The style that is most important wins the day, so the text is green rather than red, despite the fact that the red declaration comes later in the cascade.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 “Embedded: Adding Styles to a Web Page” in Chapter 3) or in an external CSS file that is then imported or linked to the HTML document (see “External: Adding Styles to a Web Site” in Chapter 3).
- Make it important. Type a style declaration, a space, !important, and a semicolon (;) to close the declaration.
color: green !important;
- Add other styles.
font-size: 3em;
Add any other declarations you wish for this rule, making them !important or not, as you desire.
!important is a powerful tool, second only to inline styles for determining style cascade. !important is great for debugging your CSS; but, because it can interfere with making changes later, it should never be used in the final Web site code.
Setting a shorthand property to !important (background, for example) is the same as setting each sub-property (such as background-color) to be !important.
)