HTML and CSS Reference
In-Depth Information
font-weight
(optional)
font-size
line-height
(optional)
font-family
The syntax is difficult to remember because the first three items are optional and can be in any order.
However, the remaining items
must
come in the prescribed order. If you declare
line-height
, it must be
separated from
font-size
by a forward slash. Take, for example, the following style rule:
p {
font-style: italic;
font-weight: bold;
font-size: 14px;
line-height: 1.4;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
You can convert that to shorthand like this:
p {
font: bold italic 14px/1.4 "Trebuchet MS", Arial, Helvetica, sans-serif;
}
Notice that I reversed the order of
font-style
and
font-weight
, which is perfectly valid. The shorthand
version is shorter and relatively easy to read. However, one of the most common mistakes is to leave out
everything except the
font-family
. The following example
will not work
:
/* BAD EXAMPLE */
p {
font: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
/* END BAD EXAMPLE */
■
The
font
shorthand property is not a synonym for
font-family
. you must declare both the font size
and the font stack, and they must come in that order.
Caution
There's nothing you can do with the
font
shorthand property that you can't do with the individual
properties. I find that the code completion features in most HTML and CSS editors make it easier to use the more
explicit declarations than trying to remember the shorthand syntax. But if you prefer the more succinct way of
defining your fonts, the shorthand syntax is supported by all browsers.
Changing the Color of Text
The color of text is controlled by the
color
property. You can use any of the color formats described in
Chapter 3
. The value is inherited, so the color affects the text in all descendant elements unless a more specific
rule overrides it. It's considered good practice to set the colors for background and text at the same time because
users can set their own default colors in a local style sheet. If your text color doesn't provide sufficient contrast
with the user's background, the text will be illegible. Backgrounds are the subject of
Chapter 8
, but there are no
