Styling semantic markup: A modern example with sans-serif fonts

Required files styling-semantic-text-starting-point.html and stylingsemantic-
text-starting-point.css from the chapter 3 folder.
What you’ll learn How to create a contemporary-looking page of text using Lucida
fonts, as per the text on Apple’s website.
Completed files styling-semantic-text-2.html and styling-semantic-text-2.
css from the chapter 3 folder.

1. Set the font defaults. As in the previous exercise, use a body rule to define the
default font for the page, the first couple of choices of which are Lucida variants
that are installed on Mac OS and Windows. Other fonts are provided for legacy or
alternate systems.
body {
font-family: "Lucida Grande", "Lucida Sans Unicode", Lucida, Arial,
å Helvetica, sans-serif;
line-height: 1.5;
}
2. Style the main heading. An h1 rule is used to style the main heading. The restrictive
value for line-height makes the leading value the height of one character of the
heading, meaning there’s no space underneath it. This means you can define an
explicit padding-bottom value can be defined, followed by a border-bottom (here,
1 pixel, solid, and very light gray), followed by a margin-bottom value. The
padding-bottom and margin-bottom values are the same, creating a very tight,
clean feel for the heading. Elsewhere, the color setting knocks it back slightly so
that it doesn’t overpower the other content, and the font-weight value removes
the default bold setting that browsers apply to headings. This helps the block of
text appear light and clean.
h1 {
font-size: 1.8em;
line-height: 1em;
padding-bottom: 7px;
border-bottom: 1px solid #cccccc;
margin-bottom: 7px;
color: #666666;
font-weight: normal;
}

3. Style the other headings. For the next two heading levels, font-size values are
assigned. In keeping with the modern style, the crossheads are the same size as the
paragraph text (styled in the next step)—just displayed in bold; the subheading (h2)
is slightly larger, making it a little more prominent. Again, the headings are colored
to make them blend in a little more, and not distract from the paragraph text.
h2, h3 {
color: #333333;
}
h2 {
font-size: 1.3em;
}
h3 {font-size: 1.2em;
margin-top: 1.65em;
}
4. Style the paragraphs. The font-size setting is larger than that used on many websites
(which typically tend toward 11 pixels, which would require a 1.1em value in
this example), but this ensures clarity, and again, enhances the clean nature of the
design.
p {
font-size: 1.2em;
margin-bottom: 1.2em;
}
The final rule—an adjacent sibling selector—styles the paragraph following the
main heading, making the intro paragraph bold. It’s colored a dark gray, rather than
black, which would be overpowering and wreck the balance of the page.
h1+p {
font-weight: bold;
color: #222222;
}
The following image shows what your completed page should look like.