HTML and CSS Reference
In-Depth Information
Style the heading
How about a different
font for the lounge headings?
Make them really stand out.
I'm seeing big, clean, gray…
Now let's give those headings some style. How about changing the
font a bit? Let's change both the type of font, and also the color of
the heading fonts:
H
e re
' s t
h e r
u l e
to s
e l e c
t
<
h 1 >
e l e
m e n t
s a
n d c
h a n
g e
h1 {
font-family: sans-serif;
color: gray;
}
t
h e
fo n t
- f
a m i l
y to
s a n s
- s e r
i f a
n d
t h e
fo n
t
c o l o
r to
g r
a y . W
e ' l l
t al
k a
l o t
m o r
e a b
o u t
fo n
t s l
at e r
.
h2 {
font-family: sans-serif;
color: gray;
}
p {
color: maroon;
}
Actually, because these rules are
exactly
the same, we
can combine them, like this:
To
write
a r
ule fo
r mo
re t
han o
ne
ele
ment
, just
put
com
mas b
etw
een
the
sele
ctor
s, like
“h1
, h2”
.
h1, h2 {
font-family: sans-serif;
color: gray;
}
p {
color: maroon;
}
Test drive…
Add this new CSS to your “lounge.html” file
and reload. You'll see that with one rule, you've
selected both the
<h1>
and
<h2>
headings.
B
oth of
the he
adings
on
the p
age are
now
st
yled w
ith a s
ans-ser
if
fo
nt and
colore
d gray
.
