Lists and CSS

Introduction

This document is intended to demonstrate the use of CSS to control the presentation of lists. For a sample discussing list basics, see lists.html.

Standard list markers

CSS provides several types of list markers.

Unordered lists

By default, an unordered list will generally look like this:

• Food
• Water
• Windbreaker
• Sweatshirt
• Matches
• Flashlight
• Map

But it can be modified to look like this:

• Food
• Water
• Windbreaker
• Sweatshirt
• Matches
• Flashlight
• Map

or this:

• Food
• Water
• Windbreaker
• Sweatshirt
• Matches
• Flashlight
• Map

Ordered lists

By default, an ordered list will generally look like this:

1. Write the page using XHTML
2. View the page locally with a browser
3. Fix any problems in the XHTML
4. Transfer the completed page to the server host
5. Verify the page permissions
6. View the page from the server with a browser

But it can also be made to look like this:

1. Write the page using XHTML
2. View the page locally with a browser
3. Fix any problems in the XHTML
4. Transfer the completed page to the server host
5. Verify the page permissions
6. View the page from the server with a browser

or this:

1. Write the page using XHTML
2. View the page locally with a browser
3. Fix any problems in the XHTML
4. Transfer the completed page to the server host
5. Verify the page permissions
6. View the page from the server with a browser

or this:

1. Write the page using XHTML
2. View the page locally with a browser
3. Fix any problems in the XHTML
4. Transfer the completed page to the server host
5. Verify the page permissions
6. View the page from the server with a browser

Nested lists

These techniques can also be applied to nested lists:

• Apples
  1. Mcintosh
  2. Cortland
  3. Granny Smith
  4. Braeburn
• Pears
  1. Bartlett
  2. Red
  3. Bosc
• Grapes
  1. Green, seedless
  2. Red, seedless
  3. Concord

Although you would seldom want to mix so many different types of ordered list markers out in the real world!

Images as list markers

It is also possible to use an image as a list marker (most commonly for unordered lists). When using an image as a list marker, you may want to also specify a generic marker shape as a backup in case the image is not available. Images will take precedence over generic markers when available.

• Food
• Water
• Windbreaker
• Sweatshirt
• Matches
• Flashlight
• Map

Generally, small, simple images work best in this role. When searching image archives for suitable images, check under the Bullets category.