This requires some extra calculations when
it comes to defining line-height values.
Completed files styling-semantic-text-3.html and styling-semantic-text-3.
css from the chapter 3 folder.
1. Define a default font for the page. Using a body rule, a default font is chosen for
the web page. This design primarily uses the Georgia font??”a serif??”to enhance the
traditional feel.
body {
font-family: Georgia, "Times New Roman", Times, serif;
}
At this point, it??™s also important to decide on a target line-height value for the
page. For this example, it??™s going to be 18px.
2. Style the main heading. Here??™s where things get a little tricky. For these examples,
we??™re working with relative units. As mentioned earlier in the chapter, the 62.5%
method means that you can define font sizes by setting the font-size value to a
setting in ems that??™s one-tenth of the target size in pixels. So, in the following code
block, the h1 rule??™s font-size value of 1.8em means it??™s effectively displayed at
18 pixels (assuming the user hasn??™t messed around with their browser??™s default settings,
again as mentioned earlier).
For the line-height value to hit the target of 18 pixels, it must therefore
be 18 pixels or a multiple of it. However, when using ems, this value is relative to
the font-size value. One em is equal to the height of one character, and since
the font-size has been set to 1.8em (which is equivalent to 18 pixels), we set
line-height to 1em.
Pages:
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171