By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

CSS List Properties

Reference listing the list properties of CSS, which are used to style lists.

Edited: 2016-01-04 03:42

The CSS list properties are used to control the appearance of HTML lists, such as ol and ul. The list properties mainly makes it possible to change the default list item marker, so it is possible to change bullets into numbers, and numbers into bullets.

A common practice is to remove the marker entirely, since lists are widely used to markup navigation and menus in HTML. The semantic of an ordered list should not change simply by changing the list marker. Using an ordered list while removing the list marker should still tell clients that the list is ordered.

It has been said that unordered lists can in fact be rendered in any order the client decides, but this is not normal. The client will usually render the list in the order that the list items are placed in the markup, so the difference between ordered and unordered lists is, visually, not significant. However, it may still be relevant for screen readers or future web clients which list element type you use.

It is important to note that the visual presentation of elements is different than the non-visual presentation, so changing an elements visual presentation with CSS will not affect the element type. For example, an UL that is changed to look like an OL still carries the semantic meaning of an UL.

Changing the marker type

The CSS list-style-type and list-style-image properties makes it possible to change the appearance of list markers or bullets. The list-style-type property makes it possible to set the marker of HTML lists, the some of the options include bullet, numbers and Roman numerals.

For example, to use Roman numerals you would either use a value of lower-roman or upper-roman, which can be applied like in the below example:

ol {
 list-style-type: upper-roman;
}

Which would look like:

  1. List item 1
  2. List item 2
  3. List item 3
  4. List item 4
  5. List item 5

Using an image as the list marker

It is also often desired to use an image as a list marker, which can be done using the list-style-image property. Sometimes it may be better to apply the image as a background with position top left. The affect is very similar to using the list-style-type property, but may sometimes be easier to style cross-browser. Using a background rather than a real image marker has the added benefit that it is easier to get to work with CSS image sprites.

Examples for both methods will be included, you will just have to decide which to use your self. Now, beginning with the list-style-image method to use an image as marker:

ol {
 list-style-image: url("/i/gear-icon.png");
}

And the achieved list-style-image effect is:

  1. List item 1
  2. List item 2
  3. List item 3
  4. List item 4
  5. List item 5

Now we try using the background property on the li elements instead:

ol { /* removes the margin and padding on the list */
 margin: 0;
 padding: 0;
}
li {
 background: url("/i/gear-icon.png") no-repeat top left;
 list-style-type: none;
 min-height: 20px; /* avoids the cutting away of the marker with tiny or missing text */
 padding-left: 27px; /* adds our own padding to avoid text on top of the marker */
}

Applying the marker image as a background on the li elements makes it possible to use CSS sprites, this is because we can control the position when setting the background image. The result is:

  1. List item 1
  2. List item 2
  3. List item 3
  4. List item 4
  5. List item 5

The list properties of CSS

  1. list-style-type
  2. list-style-image