The importance of typography on the webLesson 6, Formatting Text with CSS 13713 Save the fi le and preview it in your browser.The list items in the fi rst list are spaced using margins, while the list items in the second list are spaced using padding.Padding-top adds 1 em of space to the top of each list item, but because padding adds space
to the inside of an element, you do not see the background color.
14 Return to your text editor and comment out all three of your background color
properties. For a reminder of how to do this, you can revisit step 12 of the margins
exercise on page 126.
15 Save the fi le and preview it in your browser.
Notice that without the background colors it would be impossible to know that the spacing
of the fi rst list used margins and the spacing of the second list used padding. Using margins
and padding indiscriminately can lead to problems, especially as your lists become more
complicated.
In this lesson you learned the diff erent ways you can set the font-size of your text with
an emphasis on using the em unit of measurement. You also learned how to control the
appearance of your text with CSS properties including margins, padding, line-height,
text-transform, letter-spacing, and font-weight. Finally, you learned the three types
of HTML lists and how to style them.
This lesson involved the most coding you have done up to this point. If you would like to
compare your work with a fi nished version, open the fi nal page, named 06_fi nal.html, which is
located in your web06lessons folder.