Style Sheets - Web Standards: Mastering HTML5, CSS3, and XML - page 164

As a result, declarations written by developers generally have more weight than that of
user style sheets, which have more weight than the default styles of the browser. This is
the reason why links are generally rendered in the font color defined by the web designer
rather than the default anchor color (Listing 5-62).

Listing 5-62. A Rule in a CSS File That Has More Weight Than the Corresponding Rule in
the Default Style Sheet of Browsers

a {
font-color: #12ee12;
}

2. Specificity : The declaration with the highest specificity is chosen. The specificity of

selectors can be calculated as follows [19]:
The number of ID attributes in the selector is counted. •

• The number of other attributes and pseudoclasses in the selector is counted.

• The number of element names in the selector is counted.

• The concatenation of these numbers is the specificity.

• Negative selectors are counted similar to their simple selectors' argument.

• Pseudoelements are ignored.

In Listing 5-63, the specificity of the first declaration is the lowest, and the specificity
of the last one is the largest. The font color of all paragraphs is the same (black), except
those paragraphs that are included in a division, which have a different font color (green).
The div elements with the tip value declared for the class attribute have an even more
specific rule, which makes their font color distinctive (red, which is different from the color
of any other paragraphs).

Listing 5-63. Declarations with Increasing Specificity
p {
color: #000;
}
div p {
color: #0f0;
}
.tip p {
color: #00f;
}

3. Declaration order : If two declarations have the same weight, origin, and specificity, the last

declaration is chosen (imported style sheets should also be considered). Imported style
rules are processed prior to the rules of the style sheet. The rules of further imported style
sheets are taken into account in the order of the @import rules.

Inheritance
In web markup languages and style sheets, certain codes are automatically reused. In CSS, property values of parent
elements can be set to their children. The specified value of an element-property combination is copied from the
corresponding computed value of the parent element. This procedure is called inheritance . It eliminates the need for