HTML and CSS Reference
In-Depth Information
Initial value:
normal
| Inherited: Yes | Applies to: All Elements | CSS2.1
Browser support: IE 4+, Firefox 1+, Chrome 1+, Opera 7+, Safari 1+
line-height
specifies the minimal height of a line of text within an element. The initial value of
normal
means
the
line-height
is the same value as the
font-size
. You also can specify a unit of length, percentage, or
number. A number value is a multiplication of an element's font size.
1.
In styles.css, find the
#content p, #content ul
rule set and add the following declaration:
line-height: 1.4em;
2.
Save styles.css.
As shown in Figure 11-4, the main content now has an increased
line-height
(the space between lines of text
has increased). You can achieve the same effect by using the declarations
line-height: 140%;
or
line-
height: 1.4;
.
Figure 11-4
The line-height of the main content is increased.
font (Shorthand)
Browser support: IE 4+, Firefox 1+, Chrome 1+, Opera 3.5+, Safari 1+
As you've seen, styling and changing the font consist of quite a lot of properties. To make life easier, you can use the
font
property, which is a shorthand consisting of the properties
font-style
,
font-variant
,
font-
weight
,
font-size
,
line-height
, and
font-family
. Use the following syntax when using the
font
property:
font: font-style font-variant font-weight font-size/line-height font-family;
At a minimum,
font-size
and
font-family
must be present. When specifying
font-size
and
line-
height
, you separate the two with a forward slash (
/
).
1.
In styles.css, find the
body
rule set and delete the following declarations:
font-family: Average, Georgia, serif;
font-size: 62.5%;
2.
In their place, add this shorthand
font
declaration: