Web Design with HTML and CSS

The importance of typography on the web

Lesson 6, Formatting Text with CSS 135

5 Save the fi le and preview it in your browser. The background color for the list items in
the unordered list is green because of that ul li rule, while the background color for
the ordered list is purple based on the li rule.

Only the list items in your unordered list are colored green.

6 Close your browser and return to your text editor. You’ll now focus on controlling the
spacing of your lists. However, fi rst you’ll correct the fact that your ordered list is bigger
than your unordered list by adding a font-size property.

7 Add the following code to make the ordered list the same size:

ol {

font-size:0.875em;

}

In order to add space between the unordered list and the ordered list, you can add a
bottom margin (highlighted below in red) to the unordered list:
ul {
font-size:0.875em;
background-color:#E5DAB3;
margin-bottom:2em;
}

This works much like the earlier exercises where you controlled the space between your
headings and paragraph. However, it is also important that you understand the role of
padding when it comes to lists.