Tutorial 14: CSS Ordered & Unordered Lists

Inherited: Yes

List Style
You can control the appearance of ordered and unordered lists in one declaration with the list-style property

list-style: value value;

Values:

image
position
type

Or you can control them individually

List Style Image
You can use an image for the bullet of unordered lists with the list-style property

list-style-image: url(path_to_image.gif, jpg or png);

If you use an image, it is a good idea to declare the list-style-type also in case the user has images turned off.

List Style Position
You can control the position of ordered and unordered lists with the liststyle- position property

list-style-position: value;

Values

inside
outside

---

List Style Type
You can control the type of bullet ordered and unordered lists use with the list-style-type property

list-style-type: value;

Values

disc
circle
square
decimal
lower-roman
upper-roman
lower-alpha
upper-alpha
none