CSS Cookbook, 3rd Edition

Chapter 6. Lists

Introduction

From a wife handing her husband a grocery list as he steps out the door to a music channel presenting its top 100 worst songs of all time, lists help people stay focused and organized.

In web design, it’s the same case.

HTML lists facilitate the presentation of organized content to your site’s visitors by grouping key elements together. Also, HTML lists are appealing in part because of the way they appear on the page.

List items are typically indented and keyed off by a marker, usually by a filled circle for an unordered list or numbers for an ordered list (see Figure 6-1).

With a few lines of HTML, a web coder can create a bulleted list on a web page without opening an image editor. With CSS, you can create even more visually compelling lists.

With a few simple CSS rules, however, web developers can tailor the presentation of that same list to complement the design of a web page instead of relying on the stodgy browsers’ default styling.

This chapter illustrates how to change the numbering of list items, use your own image for a list marker, create a hanging indent that doesn’t use a list marker, and more.

Changing the Format of a List

Problem

You want to change the default list style—for example, to change the bullet or numbering, as shown in Figure 6-2.

Figure 6-1. The default rendering of a list

Figure 6-2. The list markers changed to lowercase roman numerals ...