Font
Font is perhaps the trickiest. However, it follows the same rules as the background shorthand property. All that you do not declare will have unexplicit values. Here is the font shorthand specification:
font properties
element {
font-style: normal || italic || oblique;
font-variant:normal || small-caps;
font-weight: normal || bold || bolder || || lighter || (100-900);
font-size: (number+unit) || (xx-small - xx-large);
line-height: normal || (number+unit);
font-family:name,"more names";
}
The default values for the font shorthand property are as follows:
default font property values
element {
font-style: normal;
font-variant:normal;
font-weight: normal;
font-size: inherit;
line-height: normal;
font-family:inherit;
}
And of course without any further ado. The font shorthand property syntax:
the font shorthand property
element {
font:
normal
normal
normal
inhert/
normal
inherit;
}
Here is where it gets tricky. The fact that font-style, font-variant, and font-weight all come “normal” out of the box, you may need to pay a little more close attention when you’re styling elements that come with default browser styles like <h1> - <h6> or <strong> and <em>. For example, styling the strong element:
strong element styled with font
strong {
font:12px verdana;
}
By writing the above into your style sheet, you will be inexplicit removing the font-weight:bold default browser style that is applied to strong elements.
Last but not least (for -font- that is), a real world example:
font shorthand property example (inexplicit)
p {
font:bold 1em/1.2em georgia,"times new roman",serif;
}
This would be the same as declaring the following properties:
the font shorthand property (explicit)
p {
font-style:normal;
font-variant:normal;
font-weight:bold;
font-size:1em;
line-height:1.2em;
font-family:georgia,"times new roman",serif;
}
