CSS List

CSS list properties allow you to place, change the list item marker, or use an image as the list item marker.

CSS List

In a sense, any content that is not descriptive text can be considered as a list. Population census, solar system, family tree, visit menu, even all your friends can be represented as a list or a list of lists.

Since lists are so diverse, this makes lists quite important, and it is indeed a great pity that the list styles in CSS are not rich enough.

List Type

To affect the style of the list, the simplest (and most comprehensive) method is to change the marker type.

For example, in an unordered list, the list item marker (marker) is a dot appearing next to each list item. In an ordered list, the marker may be a letter, number, or some other symbol from a counting system.

To change the marker type used for list items, you can use the property list-style-type:

ul {list-style-type: square}

The above declaration sets the list item marker of the unordered list to a square.

List Item Image

Sometimes, conventional markers are not enough. You may want to use an image for each marker, which can be achieved by using list-style-image The property does:

ul li {list-style-image: url(xxx.gif)}

You can use an image as a marker simply by using a url() value.

List Marker Position

CSS2.1 can determine whether the marker appears outside or inside the list item content. This is achieved by using list-style-position Done.

Abbreviated List Style

For simplicity, the above 3 list style properties can be merged into a convenient property:list-stylelike this:

li {list-style: url(example.gif) square inside}

The values of list-style can be listed in any order, and these values can be ignored. As long as a value is provided, the others will be filled in with their default values.

CSS List Example:

List markers of different types in an unordered list
This example demonstrates different types of list item markers in CSS.
List item markers of different types in an ordered list
This example demonstrates different types of list item markers in CSS.
All List Style Types
This example demonstrates all different types of list item markers in CSS.
Use an Image as List Item Marker
This example demonstrates how to use an image as the list item marker.
Placement of List Marker
This example demonstrates where to place the list marker.
Define all list properties in one declaration
This example demonstrates how to set all list properties in a shorthand property.

CSS List Properties (list)

Attribute Description
list-style Shorthand property. Used to set all properties used for lists in one declaration.
list-style-image Set an image as the list item marker.
list-style-position Set the position of the list item marker in the list.
list-style-type Set the type of list item marker.
marker-offset