h2 {
font-size: 1.4em;
line-height: 1.2857142em;
margin-top: 1.9285713em;
margin-bottom: 0.6428571em;
}
4. Style the crossheads and paragraphs. For this example, the crossheads and paragraphs
are identical, save for the default styling on the headings that renders them
in bold. The font-size value is 1.2em. Again, 1.8 is divided by the font-size figure
to arrive at the line-height and margin values, both of which are set to 1.5em.
Note that the h3 rule has no margin-bottom value, meaning that each level-three
heading hugs the subsequent paragraph.
h3 {
font-size: 1.2em;
line-height: 1.5em;
margin-top: 1.5em;
}
p {
font-size: 1.2em;
line-height: 1.5em;
margin-bottom: 1.5em;
}
At this point, your page should look like the following image.
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
96
5. Add a (temporary) grid. When working on text that adheres to a baseline grid, it
can help to create a tiled background image that you can use to check whether
your measurements are accurate. The 18-pixel-high image file, styling-semantictext-
baseline.gif, has a single-pixel line at the bottom of the image. When
applied to the wrapper div??™s background via the #wrapper rule (see the following
code), a ruled background is shown. Although intended as a temporary design aid,
you could retain the grid permanently, because it can help readers to rapidly skim
text. However, the aid only works when a browser is using default settings??”when
the text is enlarged, the background image stays as it is, resulting in the grid of the
image and the grid of the text being out of sync.
Pages:
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173