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

Class Selectors
Class selectors , which begin with a period ( . ), select all elements with a class attribute identical to the value specified
in them. Since the class attribute can be applied multiple times in a web page, class selectors can style any element
within the document with the same class identifier. For example, the rule in Listing 5-12 is referred in the markup, as
shown in Listing 5-13 and Listing 5-14.
Listing 5-12. Class Selector Example
.abstract {
font-size: 1.1em;
}
Listing 5-13. The Class Selector in Listing 5-12 Can Be Applied to Headings
<h3 class="abstract" >Abstract</h3>
Listing 5-14. The Same Class Selector Can Also Be Applied to Paragraphs
<p class="abstract" >
The abstract of the first Chapter
</p>
If the ruleset should be applied for certain types of elements with the specified class name, a more specific rule
can be written by providing the element name before the period. For example, if the previous rule should be valid
exclusively for paragraphs, it should be extended by declaring the desired element type (Listing 5-15).
Listing 5-15. A Rule for All Paragraphs with the Class Name abstract
p.abstract {
font-size: 1.1em;
}
ID Selectors
Certain markup elements are intended to be unique throughout a web document; that is, they can occur only once
per web page. They are identified by the identifier attribute id . Those selectors that select the unique element on the
web page with the id attribute equal to the value specified in them are called ID selectors and begin with a hash mark
( # ). Listing 5-16 shows an example.
Listing 5-16. An ID Selector Example
#main {
margin-left: 120px;
}
Listing 5-17 shows a markup example where the previous rule is applied.
Listing 5-17. Example Content for Which the ID Selector #main Can Be Applied
<div id="main" >
The main content has a left margin of 120 pixels.
</div>