A Smarter Way To Learn HTML & CSS(2015)

38
Stlying lists

Since lists are text elements, you can style them the way you’d style a paragraph or heading, with a customized font-family, font-size, font-weight, color, and margins.

This CSS code insets any unordered list, assigning extra whitespace on both the left and right.

ul {
margin: 0 1.5em 0 1.5em;
}

You could, of course, adjust the top and/or bottom margins, too. Use the same type of code for ordered lists. Just substitute ol for ul in the code above.

The code above styles all the unordered lists on the page. You could create a class of lists, just for some of your lists.

ol.special {
margin: 0 1.5em 0 1.5em;
}

By default, browsers don’t add any space between list items. I think they look better if they’re separated a bit.

li {
margin: .75em;
}

Note that there’s only one margin number in the code above. Browsers understand that it specifies the space between list items.

The default is a bullet on the outside with all lines of text indented. To make the default explicit, write...

ul {
list-style-position: outside;
}

To indent only the first line of text and make all other lines flush with the bullet, write...

ul {
list-style-position: inside;
}

In your CSS file add space between list items. Save the file. Display the page.

Sample CSS code is at:
http://asmarterwaytolearn.com/htmlcss/practice-38-1.html.

Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/38.html