CSS Shorthand at a Glance - Font shorthand property
(Page 3 of 8 )
The syntax of the "font" shorthand property is the following:
font: font-style | font-variant | font-weight | font-size | line-height | font-family;
The "font-style" property specifies whether the font should be rendered normally (normal), or in italics (italic), while "font-variant" can be used to display the text entirely in capital letters, with the lowercase letters of the source code displayed in a smaller font size. A setting of "small-caps" enables this effect, while "normal" disables it.
Also, we can specify the font size with one of the available presets: xx-small, x-small, small, medium, large, x-large, xx-large. The presets "larger" and "smaller" may also be used to set the font size in relation to the size inherited from a parent element, or the browser default. Alternatively, we can specify a font size in pixels (px), points (pt), ems (em), or as a percentage of the parent element’s font size (%).
Font-weight sets the boldness of the font in the selected element. Most browsers support values of "normal" and "bold," but the CSS specs define the following values: "bold," "bolder," "lighter," "normal," 100, 200, 300, 400, 500, 600, 700, 800, 900, where "normal" is the same as 400 and "bold" is the same as 700.
Line-height specifies the line spacing of the text inside the selected element. The values for this property are "normal," a number (where 1 is single-spaced, 2 is double spaced, and 1.5 is halfway between the two), a measurement (px,pt,em) or a percentage.
Finally, "font-family" sets the font to be used in the selected element. The value is a comma-separated list of font names in order of preference. Font names with spaces will be quoted.
With a quick explanation of what each property means, let’s give an example to implement this in CSS shorthand:
p {
font: large/120% "Times New Roman", Times, serif;
}
In the example, we haven’t defined "font-variant" and "font-weight," since they’re inherited from a parent element. The value "large/120%" is referencing both font-size and line-height properties respectively. As both use size as value, they can be coded together with a slash, with "font-size" the first value defined. The value for "font-family" is in quotes due to the spaces that might appear in the font name.
According to O’Reilly’s CSS Reference, the order of font properties can be set in any sequence.
Are you ready to work with backgrounds? They’re the next shorthand property.
Next: Background shorthand property >>
More Style Sheets Articles
More By Alejandro Gervasio
/ 20 
