HTML and CSS Reference
In-Depth Information
font: 62.5% Average, Georgia, serif;
3.
Save styles.css.
When you use the shorthand
font
declaration, all font-related properties are first reset to their initial values, so in
the declaration you just added,
font-style
,
font-variant
, and
font-weight
are absent and will be set to
their initial value of
normal
.
font-size
will be set to
62.5%
,
line-height
is also absent so will be set to
normal
, and finally,
font-family
will be set to
Average, Georgia, serif
.
Now, you might want to go through the rest of the font-related properties in the Cool Shoes & Socks stylesheet to
make them shorthand, but doing so wouldn't be efficient. Consider the following rule set:
h1, h2, h3, h4 {
font-weight: bold;
font-family: Belgrano, serif;
}
Because the
font
declaration resets all font-related properties to their initial value, when you use the
font
prop-
erty in this rule set, the
font-size
is reset to
medium
, overriding the more desirable font size that is inherited. Of
course, you could specify the
font-size
as well, like so:
h1, h2, h3, h4 {
font: bold 1em Belgrano, serif;
}
By doing this though, you're making a little extra work for yourself because these elements will inherit a
font-
size
anyway. Using shorthand properties where possible is a good idea, but in this case—and with all other font-re-
lated declarations in the Cool Shoes & Socks stylesheet—it's more efficient to use the longhand properties instead,
allowing inheritance to work its magic.
Code Challenge: Change the Style of More Fonts
In styles.css, do the following:
1.
In the rule set
#header nav ul li a,
add the declaration
font-weight: bold;
.
2.
In the rule set
input[type=”submit”][class=”button”]
, add the declaration
font-size:
1em;
.
3.
In the rule sets
blockquote p:before
and
blockquote p:after
, add the declaration
font-
size: 2em;
.
4.
In the rule set
label
and
input[type=”text”], input[type=”email”]
, add the declaration
font-size: .8em;
.
