130
The importance of typography on the webWeb Design with HTML and CSS Digital ClassroomOften times, experimenting with styles such as text-transform and letter-spacing will
require you to return to your initial font-size. In your heading 2, for example, using all
capital letters makes the heading look bigger, so you will reduce the size a bit.6 Modify the font-size value (highlighted in red) of your h2 style as follows:
font-size:1.125em;
7 Save and close your fi le.Working with HTML lists
Lists are found on many web pages and it is important that you learn how to control
their appearance. Examples of where you might fi nd lists include recipes, frequently asked
questions, and navigation menus. In this exercise you will learn the three categories of
lists and how to control their styles. The three categories are unordered lists, ordered lists, and
defi nition lists.
Unordered lists are also called bulleted lists because the default style adds a bullet to the left
of each item in the list. Ordered lists are also called numbered lists because the default style
adds a number to the left of each item in the list. Defi nition lists have two default styles:
a bold style for a defi nition term and an indented style for the defi nition description.1 In your text editor, choose File > Open and navigate to the web06lessons folder. Locate
the 06lists.html fi le and click OK. This fi le has the styled text from the previous exercise,
as well as three new paragraphs that you will be converting to lists.
Before starting on the exercise, note a few changes that are made to the new <h3> style.
In this example, you want all the attributes of the h2 without having to write them
again, so a comma and the code h3 are added to the h2 selector. However, because the
h3 element needs to be smaller, a new font-size property of 0.875em is set. To adjust
the letter-spacing, this property is set to 0.1em. Because these are the only two
properties for h3, they override the properties for h2.