O'Reilly logo

CSS Cookbook, 2nd Edition by Christopher Schmitt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Chapter 5. Lists

Introduction

From a wife handing a husband a grocery list as he steps out the door to a music channel presenting their 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 our site’s visitors by grouping key elements together.

HTML lists are appealing in part because of the way they appear on the page. List items typically are indented and keyed off by a marker, usually by a filled circle for an unordered list or numbers for an ordered list (see Figure 5-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.

The default rendering of a list
Figure 5-1. The default rendering of a list

Web developers can tailor the presentation of the list to complement the design of a web page instead of relying on the 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 in Figure 5-2.

The list markers changed to lowercase Roman numerals
Figure 5-2. The list markers ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required