- The Element Family Tree
- Defining Styles Based on Context
- Working with Pseudo-classes
- Working with Pseudo-elements
- Defining Styles Based on Tag Attributes
- NEW IN CSS3: Querying the Media
- Inheriting Properties from a Parent
- Making a Declaration !important
- Determining the Cascade Order
- Putting It All Together
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).
h1 {...}Code 4.20. The !important value has been added to the color property in the first h1, but not in the second
. Typically, the second h1 would override the first, but not in this case.
<!-- HTML5 --> <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Alice's Adventures in Wonderland</title> <style type="text/css" media="all">
h1 {color: red !important;font-size: 3em; }...h1 {color: black;font-size: 2em; }</style> </head> <body> <article> <h1>Alice's Adventures in <em>Wonderland</em></h1> </article> </body> </html>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: red !important;
- Add other styles.
font-size: 1em;
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.
)