Styling semantic markup: A basic example with proportional line heights

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 style headings and paragraphs using sans-serif fonts
(Verdana for body copy and Arial for headings) and proportional,
unitless line-height settings.
Completed files styling-semantic-text-1.html and styling-semantic-text-1.
css from the chapter 3 folder.
1. Define the font defaults. Using a body selector, define a default font for the
web page, along with a default line-height value. As this is a basic example,
Verdana is used as the primary font, falling back to Arial and Helvetica. The unitless
line-height value means that elements will have proportional line heights based
on their font-size values, unless otherwise stated.
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
line-height: 1.5;
}

2. Define common settings for headings. In this example, the top two levels of headings
will have the same font-family value. Therefore, it makes sense to use a
grouped selector to define this property:
h1, h2 {
font-family: Arial, Helvetica, sans-serif;
}
3. Define specific values for headings. How you style headings will depend on their
purpose. For these exercises, h1 is the page heading, h2 is a subheading, and h3 is a
crosshead to introduce a section of copy. With that in mind, the crosshead needs to
be of similar size to the paragraphs, the main heading needs to be most prominent,
and the subheading needs to be somewhere in between. Therefore, in the CSS, the
h1 element has a font-size value of 2.5em, the h3 has a much smaller 1.2em, and
the h2 has an in-between 2em.
h1 {
font-size: 2.5em;
}
h2 {
font-size: 2em;
}
h3 {
font-size: 1.2em;
}
4. Style the paragraphs, using the following rule. Whereas the space around headings
is taken care of with the line-height setting defined in the body selector, that
doesn’t work for paragraphs, which must have distinct space between them.
Therefore, along with a font-size property/value pair, a margin-bottom value sets
the space between each paragraph to slightly more than the height of one character.
p {
font-size: 1.1em;
margin-bottom: 1.1em;
}
5. Refine the element spacing. At this point, the spacing is still a little suspect—the
crossheads don’t stand out enough. Therefore, add a margin-top value to the h3
rule; this provides a little extra space between paragraphs and level-three headings.
(As mentioned earlier, vertical margins collapse, so the space between a paragraph
with a bottom margin of 1.1em and a level-three heading with a top margin of
1.65em is 1.65em, not the sum of the two margins, which would be 2.75em.)

h3 {
font-size: 1.2em;
margin-top: 1.65em;
}
h3, p {
margin-left: 1em;
}
The following image shows what your completed page should look like.