With the CSS keyword !important, on the other hand, you can increase the priority so that this property can’t be overridden by the subsequent specifications. You can apply this keyword to the example just shown as follows:

.m_article { border: 1px solid gray !important; }
...
.m_article { border: 1px dotted green; } 

In this case, the declaration made last is no longer given preference. In this example, the !important keyword draws a solid gray border with a thickness of 1 pixel around the element containing the m_article class.

10.2.3    Sorting by Importance and Origin

The !important keyword slightly changes the priority order, which used to be author stylesheet before user stylesheet before browser stylesheet. Sorting by importance can be written in the following order of descending priority (importance):

1. User stylesheet with !important

2. Author stylesheet with !important

3. Author stylesheet

4. User stylesheet

5. Browser stylesheet

In practice, you’ll probably be dealing with your own author stylesheet most of the time (without !important).

You might wonder why the user stylesheet with !important is suddenly more important than the author stylesheet with !important because without !important, it’s the other way around. Thus, if a user marks a CSS feature with !important in the stylesheet, it has to be accepted by the web browser, no matter what you’ve set there.

The reason that a user stylesheet with !important has a higher importance than an author stylesheet with !important is that people with a disability should be preferred, so that they may be able to determine by themselves in what way the content should be displayed. For example, a person with a visual impairment could increase the paragraph font size using a custom stylesheet as follows:

p { font-size: 200% !important; } 

The specificities of a selector are divided into the following four groups:

• A (first digit: 1,0,0,0)
  This value is set only if the HTML element uses inline styling via the style attribute. Otherwise, this value remains at 0.

• B (second digit: 0,1,0,0)
  This group counts the number of ID attributes in a selector.

• C (third digit: 0,0,1,0)
  This group stores the number of attributes, classes, and pseudo-classes selected by a selector.

• D (fourth digit: 0,0,0,1)
  The group with the lowest weighting contains the number of element names (type selectors) and pseudo-elements.

Let’s look at a simple example:

...
<article>
  <h1>Inheritance</h1>
  <p>1. Paragraph text for article</p>
  <ul id="index">
     <li class="aclass">list item 1</li>
     <li class="aclass">list item 2</li>
  </ul>
</article>
... 

Listing 10.9     /examples/chapter010/10_2_4/index.html

From this HTML code, the li element is to be selected using the following CSS rules, all of which compete with each other:

.aclass { color: green; }
#index li.aclass { color: orange; } 
li { color: red; } 
li.aclass { color: blue; }
body article ul li { color: yellow; } 
#index li { color: gray; } 

Listing 10.10     /examples/chapter010/10_2_4/css/style.css

10.2.6    Analyzing the Cascading in the Browser