CSS List

The CSS list properties function as follows:

  • Set different list item markers for ordered lists
  • Set different list item markers for unordered lists
  • Set the list item marker to an image

List

In HTML, there are two types of lists:

  • Unordered listul- List item markers use special graphics (such as small black dots, small boxes, etc.)
  • Ordered listol- List item markers can be numbers or letters

Using CSS, you can style lists further, and use images as list item markers.

An unordered list is shown as follows:

  • Coffee
  • Tea
  • Coca Cola
  • Coffee
  • Tea
  • Coca Cola

An ordered list is shown as follows:

  1. Coffee
  2. Tea
  3. Coca Cola
  1. Coffee
  2. Tea
  3. Coca Cola

Different list item markers

The list-style-type property specifies the type of list item marker:

Example

ul.a {list-style-type: circle;} ul.b {list-style-type: square;} ol.c {list-style-type: upper-roman;} ol.d {list-style-type: lower-alpha;}

Try it Yourself »

Some values are for unordered lists, and some are for ordered lists.

Images as list item markers

To specify an image for the list item marker, use the list-style-image property:

Example

ul { list-style-image: url('sqpurple.gif'); }

Try it Yourself »

The above example does not display the same in all browsers. IE and Opera display the image marker slightly higher than Firefox, Chrome, and Safari.

If you want to place the same image marker in all browsers, you should use a browser compatibility solution, as follows:

Browser compatibility solutions

Similarly, in all browsers, the following example will display the image marker:

Example

ul { list-style-type: none; padding: 0px; margin: 0px; } ul li { background-image: url(sqpurple.gif); background-repeat: no-repeat; background-position: 0px 5px; padding-left: 14px; }

Try it Yourself »

Example explanation:

  • ul:
    • Set the list type to no list item marker
    • Set padding and margin to 0px (browser compatibility)
  • All li in ul:
    • Set the URL of the image, and set it to display only once (no repeat)
    • You need to position the image (left 0px and top 5px)
    • Use the padding-left property to place the text in the list

List - shorthand property

All list properties can be specified in a single property. This is called the shorthand property.

For lists, use the shorthand property by setting the list-style property as follows:

Example

ul { list-style: square url("sqpurple.gif"); }

Try it Yourself »

Can set the following properties in order:

  • list-style-type
  • list-style-position (For related notes, please see the CSS properties table below)
  • list-style-image

If one of the above values is missing, it doesn't matter as long as the rest remain in the specified order.

Examples

More Examples

All the different list item markers
This example demonstrates all the different CSS list item markers.

Remove default settings

The list-style-type:none property can be used to remove the small markers. By default, lists <ul> or <ol> also have padding and margins set, which can be usedmargin:0andpadding:0to remove:

Example

ul { list-style-type: none; margin: 0; padding: 0; }

Try it Yourself »

All CSS list properties

Property Description
list-style Shorthand property. Used to set all the properties for a list 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 the list item marker.
other extensions