Web Design with HTML and CSS

116

The importance of typography on the web

Web Design with HTML and CSS Digital Classroom

Setting a font-family.

In this exercise you will set your font-family for an entire page and then set the font-

family for your headings.

1 In your text editor, choose File > Open and navigate to the web06lessons folder. Locate

the 06_fonts.html fi le and click OK. This fi le has four blocks of text: a heading 1 <h1>,

a heading 2 <h2>, and two paragraphs <p>. Additionally, in the <style> section, empty

style rules are added to save you time. In this exercise, you will add the CSS properties.

You will start by adding the font-family property for the body element.

2 In the style rule for the body, type the following line (highlighted in red):

body {

font-family:“Trebuchet MS”, Tahoma, Arial, sans-serif;

}

3 Choose File > Save and then preview your page in the browser. As noted above, your

web browser renders Trebuchet if you have it on your system; if you do not, it displays

Tahoma; and if you don’t have Tahoma, you still see a sans-serif font.

When you defi ne the font family Trebuchet for the body rule, all your text is set in this font.

All of the text on your page is rendered in Trebuchet because the only style set is for the

body. Remember that the HTML body tag defi nes all of the elements on the page. Now

you will set a specifi c font family for the paragraph element.

4 In the style rule for the paragraph ( p ), type the following line (highlighted in red):

p {

font-family:Georgia, “Times New Roman”, Times, serif;

}

5 Save your document and preview it in your browser. Now that there is a specifi c rule for

paragraphs, they are styled as Georgia. The two headings are still using Trebuchet, which

you defi ned in the body style.