CSS Properties

Page 6

Styling Lists

You can do quite a lot with simple unordered lists and ordered lists. Let's look at some of the simplest things.

list-style-image

You can replace the default bullet for unordered lists or number for ordered lists with an image. Of course, you want it to be a small image, but the possibilities are endless as to what you can use.

Example

CSS

ul {list-style-image: url("smile.gif")}

Markup

<body>
<p>A very boring list</p>
<ul>
<li>List item number one</li>
<li>List item number two</li>
<li>List item number three</li>
</ul>
</body>

Display

A very boring list
  • List item number one
  • List item number two
  • List item number three

list-style-position

This property determines whether the bullets are placed inside or outside the invisible marker box that surrounds the list. By default, the bullets are outside, which in most cases is a better look.

list-style-type

Besides the default round bullet (disc), and default numbering (decimal), there are other bullets or numbering systems you can use. Valid bullet values are 'disc', 'circle' and 'square', and valid numbering system values are 'decimal', 'decimal-leading-zero', 'lower-roman', 'upper-roman', 'lower-alpha', and 'upper-alpha'. Thus, you can order your lists with numbers, letters, or even roman numerals.