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

Although they are equivalent, the second version should be preferred for many reasons. First, it is shorter and
thus contributes to code length optimality. Second, further declarations of other selectors might accidentally be
inserted between the single lines, making the CSS file much harder to maintain. Finally, the second arrangement is
easier to read, which makes development easier.
Element Selectors
If all paragraphs of a web site are intended to be written in Garamond with 1.2em font size, the ruleset looks
like Listing 5-9.
Listing 5-9. A Ruleset for All Paragraphs
p {
font-size: 1.2em;
font-family: Garamond, serif;
}
This applies to all paragraphs in the markup such as the ones in Listing 5-10.
Listing 5-10. Paragraphs to Be Styled by the Ruleset of Listing 5-9
<p>
A paragraph.
</p>
<p>
Another paragraph.
</p>
Naturally, a subset of paragraphs might have a different ruleset that partially or fully overrides the general rules
(see the “Cascading” section later in the chapter).
In the previous example, the selector selects a markup element. Such selectors are called element selectors
and apply the corresponding element names themselves. The curly braces contain the properties of the element
to style, along with the values to which they should be changed. The curly braces and the content between them
is the declaration block . The property-value pairs are separated from each other by semicolons. The properties are
separated from their values by colons. Each line is called a declaration or statement .
The selectors are separated by combinators , that is, whitespace, > or + . Further whitespace characters might be
present between the combinators and the simple selectors around them [15].
Selectors can also be grouped if the same CSS rules apply to them. The comma ( , ) should be used as the
combinator. Grouping common rules contributes to CSS code optimality. For example, Listing 5-11 changes the color
and font size of both div elements with the id attribute articles and relatedlinks , respectively.
Listing 5-11. Common Rules Can Be Grouped to Avoid Duplication
#articles, #relatedlinks {
color: white;
font-size: 1.8em;
}