When you're styling lists, there are several things you can do to affect the way the list looks. You can work with the indenting on the list to make sure that the markers (bullets or numbers) are where you want them. You can also work with the list-style properties:
- list-style-type
The type of list it is. - list-style-position
Where the markers are placed relative to the list items. - list-style-image
What image should be used for the markers.
You can use those three CSS properties separately, but I've found it easier to use the CSS list-style property. The CSS list-style property is a shorthand property that can affect all three styles on your lists at once.
CSS List-Style Type
There are a number of different types of list styles. They are:
- none
No marker on the list item. This is best used for menus and navigation lists. - circle
The marker is a circle. - disc
The marker is a filled circle. This is the default for unordered lists. - square
The marker is a square. - armenian
The marker is traditional Armenian numbering. - decimal
The marker is a number. This is the default for ordered lists. - decimal-leading-zero
The marker is a number padded with initial zeros (ie. 01, 02, 03, etc.). - georgian
The marker is traditional Georgian numbering. - lower-alpha
The marker is a lowercase alphabet character (ie. a, b, c, etc.). - lower-greek
The marker is a lowercase greek character. - lower-latin
The marker is a lowercase latin letter. - lower-roman
The marker is a lowercase roman numeral (ie. i, ii, iii, etc.). - upper-alpha
The marker is an uppercase alphabet character (ie. A, B, C, etc.) - upper-latin
The marker is an uppercase latin letter. - upper-roman
The marker is an uppercase roman numeral (ie. I, II, III, etc.) - inherit
The marker type is inherited from the value on the parent element.
One interesting thing is that you can convert an ordered list to a bulleted list and vice versa simply by changing the list-style type.
Examples of CSS list-style Types
CSS List-Style Position
The position in a CSS list-style is not the position of the element on the page, but rather where the marker for that list item should be placed relative to the list item's content. It is easiest to see when the list item text wraps to the next line. There are three options:
- outside
The bullet is outside of the text, and any wrapping text is indented so that the marker sticks out. - inside
The bullet is inside the text, and any wrapping text is aligned with the marker.
Examples of CSS list-style Positions
CSS List-Style Images
With the CSS list-style property you can change the markers on your list to any image you would like. The image has to be live on the Web. Just define it with the url() value:
list-style:url('http://z.about.com/d/webdesign/1/0/c/8/1/16-heart-gold-m.png');
