Beginning CSS: Cascading Style Sheets for Web Design, Third Edition

10

Styling Lists

WHAT YOU WILL LEARN IN THIS CHAPTER:

• The markup for basic ordered and unordered lists
• The list-style-type property and how it's used to present different types of lists through a variety of marker styles for bulleted lists and numbered lists
• The list-style-image property and how it's used to provide a custom marker for each list item
• The list-style-position property and how it's used to control the positioning of list item markers

Lists are a very versatile group of elements in HTML, used for all sort of things, such as site and page navigation, tab controls, and simple lists of items such as for tasks or shopping basket contents.

LIST MARKUP

Lists consist of two parts. The first is the list container element, which is either <ul> for lists without any particular order or <ol> for lists that have a specific order to the items within it, and in which the order matters.

The second part of a list is one or more <li> elements, which contains each item. There must be at least one <li> in every list. There is no maximum number of items, but very long lists can be hard to read and are best broken up into sections.

The most common example of an unordered list in modern websites is site navigation. Navigation is a list of links, but while they will have a visual order, they don't usually have a fixed order that is integral to the content — they make sense in any order.

<ul>
    <li>Home</li>
    <li>About Us</li>
    <li>Products</li>
    <li>Contact Us</li>
</ul>

code snippet /chapter10/figure10-1.html ...