CSS3 - HTML5 Mastery: Semantics, Standards, and Styling - page 229

The preceding code would access and bold the text content of an element in the
HTML with the id attribute of company-name , such as “The City Press” text in this
bit of HTML:
<h1 id="company-name">The City Press</h1>
The class selector works in a similar way, except that a period is used to reference
the class attribute value. The following code would add a border and padding around
HTML elements that had their class attribute set to alert :
.alert { border:1px solid red; padding:5px; display:inline-
block; }
Note You might not be familiar with the code display:inline-block . It has
to do will how the styled element is laid out on the page. Exactly what that means will
be explained later in the “CSS Box Model” section of this chapter.
The preceding selector might reference the following HTML:
<p class="alert">Warning!</p>
An advantage with classes is that—unlike IDs—a single element can have more than
one class applied to it, so styles can be layered on top of each other inside a single ele-
ment. For example, the following uses the .alert rule from earlier, plus an additional
.critical rule:
<p class="alert">
<span class="critical">Warning!</span> do not
feed the kittens, they are
<span class="alert critical">dangerous</span>
</p>
The additional style rule uppercases the text and colors it red:
.critical { text-transform:uppercase; color:red; }
Taken altogether, this creates an alert box surrounding some text, some of which is
merely critical to read and some of which is a critically important alert. The final styled
text looks like Figure 6-3 .
Figure 6-3. Class style rules can be “doubled up” on each other by setting more than one styled
class attribute value on an element.