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; .
Search WWH ::

Custom Search