Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > CSS

  • Print
  • + Share This
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 circle-a.jpg. 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:

  1. 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 circle-b.jpg. 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).

  2. Make it important. Type a style declaration, a space, !important, and a semicolon (;) to close the declaration.
    color: red !important;
  3. 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.

  • + Share This
  • 🔖 Save To Your Account