This enables subsequent content to wrap around the heading,
and is something I rarely do, but for this design, it made sense for the heading to be more
of an introduction to the introductory paragraph itself, and displaying it inline was the way
to do that. The padding-right value ensures there??™s some space before the subsequent
paragraph. The line-height setting was calculated after the values for p and h1+p were
defined, and the final figure was calculated in the same proportional manner as per h1+p
(see later in the section).
h1 {
float: left;
padding-right: 0.3em;
font: bold 1.4em/1.2571428em Arial, Helvetica, sans-serif;
}
The next three rules, h2, #sidebar h2, and p, style the level-two headings, level-two headings
in the sidebar, and paragraphs, respectively. There??™s nothing of note here, but refer to
Chapter 3 if there??™s something you??™re not familiar with. Next is the h1+p rule. This increases
the font size of the paragraph that immediately follows the level-one heading, giving it
more prominence. Because the font-size value has been increased, the line-height
value has to be decreased proportionately in order for the text to all line up correctly. The
p and h1+p rules are shown in the following code block.
p {
font: 1.1em/1.6em Verdana, Arial, Helvetica, sans-serif;
margin-bottom: 1.6em;
}
h1+p {
font-size: 1.2em;
line-height: 1.4666666em;
}
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
384
The next rule, #content ul, #pullNav, sets the default font and bottom margin for the
two types of horizontally aligned list (the pull-navigation and the item details lists in the
main content area).
Pages:
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492