HTML and CSS Reference
In-Depth Information
assigned to two elements: the first paragraph and the span element in the second para-
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;}
Search WWH ::

Custom Search