The font-size and line-height values can be combined using the syntax
font-size/line-height (e.g., 12px/16px for 12px font-size and 16px
line-height).
A complete font declaration in shorthand could therefore look like this:
p {
font: italic small-caps bold 100%/1.3em Arial, Helvetica,
?? sans-serif;
}
The equivalent in longhand is the following:
p {
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 100%;
line-height: 1.3em;
font-family: Arial, Helvetica, sans-serif;
}
As you can see, this is rather weightier!
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
84
An invalid font declaration is shown in the following code block. Here, the font-weight
value (bold) is incorrectly placed after the font-family value, and the font-size value is
missing.
p.invalid {
font: Arial, Helvetica, sans-serif bold;
}
Controlling text element margins
By default, browsers place margins around block-level text-based elements (such as headings
and paragraphs), which can be overridden by CSS. However, many designers get confused
when dealing with margins, so a good rule of thumb is to first remove all element
margins via the universal selector (see the ???Zeroing margins and padding on all elements???
section in Chapter 2 for more information).
* {
margin: 0;
padding: 0;
}
Once you??™ve done this, you should primarily control spacing between text elements via the
bottom margins:
h1, h2 {
margin-bottom: 10px;
}
p {
margin-bottom: 1em;
}
In the previous example, the margins below headings are small, enabling the eye to rapidly
travel from the heading to the related body copy.
Pages:
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159