HTML and CSS Reference
In-Depth Information
assigned to two elements: the first paragraph and the
span
element in the second para-
graph.
All you need now is a way to apply styles to these classed elements. In HTML docu-
ments, you can use a very compact notation where the name of a
class
is preceded by
a period (
.
) and can be joined with an element selector:
*.warning {font-weight: bold;}
When combined with the example markup shown earlier, this simple rule has the effect
shown in
Figure 1-6
. That is, the declaration
font-weight: bold
will be applied to every
element (thanks to the presence of the universal selector) that carries a
class
attribute
with a value of
warning
.
Figure 1-6. Using a class selector
As you can see, the class selector works by directly referencing a value that will be found
in the
class
attribute of an element. This reference is
always
preceded by a period (
.
),
which marks it as a class selector. The period helps keep the class selector separate from
anything with which it might be combined—such as an element selector. For example,
you may want boldface text only when an entire paragraph is a warning:
p.warning {font-weight: bold;}
The selector now matches any
p
elements that have a
class
attribute containing the
word
warning
, but no other elements of any kind, classed or otherwise. Since the
span
element is not a paragraph, the rule's selector doesn't match it, and it won't be displayed
using boldfaced text.
If you did want to assign different styles to the
span
element, you could use the selector
span.warning
:
p.warning {font-weight: bold;}
span.warning {font-style: italic;}
