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

Custom Search