Web Design with HTML and CSS

136

The importance of typography on the web

Web Design with HTML and CSS Digital Classroom

8 Add the following code to your ul style:

padding-left:0em;

Save the fi le and preview the page in your browser.

The unordered list with a left padding of 0 places the bullet points outside the box by default.

By zeroing-out the left padding, you collapse the default padding, all the list items shift to the

left, and the bullet points are now hanging outside the unordered list! Close the browser and

return to your text editor. Using a CSS rule, you can force the bullet points to be inside the

unordered list.

9 Add the following code to your ul style:

list-style-position:inside;

This causes the bullets to be nested within the unordered list.

10 The spacing of lists is also determined by the margins and padding of the individual list

items. Here you will modify both properties of the unordered list in order to see the

diff erence. First you will add a top margin value (highlighted in red):

ul li {

background-color:#ABC8A5;

margin-top:1em;

}

Save the fi le and preview it in your browser. Margin-top adds 1 em of space to the top

of each list item. Because the margin value adds space on the outside of an element, you

see the background-color of the unordered list.

Now you’ll add padding to the ordered list.

12 Add the following code:

ol li {

padding-top:10px;

}