Web Design with HTML and CSS

134

The importance of typography on the web

Web Design with HTML and CSS Digital Classroom

1 Type the following code to add a font-size as well as a new background color to the

unordered list style:

ul {

font-size:0.875em;

background-color:#E5DAB3;

}

2 Save the fi le and preview it in your browser. You can see that the background color

defi nes the area of the unordered list. Although you can use background colors to make

your lists more attractive, here you are using a background color to illustrate how lists

work. Close your browser. You will now style the list items.

Using a background-color helps you see the boundaries of the ul element.

3 Add this code to the empty list item style:

li {

background-color:#AA6C7E;

}

Save the fi le and preview it in your browser.

You can see that the background color of the list items overrides the color of the unordered

list, but it’s not a complete overlap; the list item background-color stops at the bullet

points (and at the numbers in the ordered list). Equally important is the fact that both the

unordered list and the ordered list use <li> tags so they are all styled equally. If you want to

specifi cally change the color of the list items in the unordered list, you must target them with

a more specifi c rule.

4 Add this entire section of code to create a specifi c rule for list items in an unordered

list only:

ul li {

background-color:#ABC8A5;

}

This rule is known as a descendant selector because the list item is a descendant of the

unordered list in your HTML. Because this rule is more specifi c, the rules of CSS state that it

will override the more general rule for the <li> element.