HTML and CSS Reference
In-Depth Information
In this case, the warning paragraph is boldfaced, while the warning span is italicized.
Each rule applies only to a specific type of element/class combination, so it does not
leak over to other elements.
Another option is to use a combination of a general class selector and an element-
specific class selector to make the styles even more useful, as in the following markup:
.warning {font-style: italic;}
span.warning {font-weight: bold;}
The results are shown in Figure 1-7 .
Figure 1-7. Using generic and specific selectors to combine styles
In this situation, any warning text will be italicized, but only the text within a span
element with a class of warning will be both boldfaced and italicized.
Notice the format of the general class selector in the previous example: it's simply a
class name preceded by a period without any element name, and no universal selector.
In cases where you only want to select all elements that share a class name, you can
omit the universal selector from a class selector without any ill effects.
Multiple Classes
In the previous section, we dealt with class values that contained a single word. In
HTML, it's possible to have a space-separated list of words in a single class value. For
example, if you want to mark a particular element as being both urgent and a warning,
you could write:
<p class="urgent warning">When handling plutonium, care must be taken to
avoid the formation of a critical mass.</p>
<p>With plutonium, <span class="warning">the possibility of implosion is
very real, and must be avoided at all costs</span>. This can be accomplished
by keeping the various masses separate.</p>
Search WWH ::

Custom Search