HTML and CSS Reference
In-Depth Information
h3 {color: white;}
h2, h3 {background: gray;}
b {color: gray; background: white;}
Any of these will yield the result shown in
Figure 1-4
. (These styles use grouped dec-
larations, which are explained in an upcoming section,
“Grouping Declara-
tions” on page 6
.)
Figure 1-4. The result of equivalent style sheets
The universal selector
CSS2 introduced a new simple selector called the
universal selector
, displayed as an
asterisk (
*
). This selector matches any element at all, much like a wildcard. For example,
to make every single element in a document red, you would write:
* {color: red;}
This declaration is equivalent to a grouped selector that lists every single element con-
tained within the document. The universal selector lets you assign the
color
value
red
to every element in the document in one efficient stroke. Beware, however: although
the universal selector is convenient, it can have unintended consequences, which are
discussed later in this topic.
Grouping Declarations
Since you can group selectors together into a single rule, it follows that you can also
group declarations. Assuming that you want all
h1
elements to appear in purple, 18-
pixel-high Helvetica text on an aqua background (and you don't mind blinding your
readers), you could write your styles like this:
h1 {font: 18px Helvetica;}
h1 {color: purple;}
h1 {background: aqua;}