CSS Lists

Unordered list:

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

Ordered list:

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

HTML lists and CSS list properties

In HTML, there are mainly two types of lists:

  • Unordered list (<ul>) - list items are marked with bullet markers
  • Ordered list (<ol>) - list items are marked with numbers or letters

CSS list properties allow you to:

  • Set different list item markers for ordered lists
  • Set different list item markers for unordered lists
  • Set an image as the list item marker
  • Add a background color to lists and list items

Different list item markers

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

The following example shows some available list item markers:

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

Note:Some values are used for unordered lists, while some values are used for ordered lists.

Images as list item markers

list-style-image The property specifies an image as the list item marker:

Example

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

Try it yourself

Positioning list item markers

list-style-position The property specifies the position of the list item markers (bullets).

"list-style-position: outside;" indicates that the list item markers (bullets) will be outside the list items. The start of each line of the list items will be vertically aligned. This is the default:

  • Coffee - A brewed beverage made from roasted coffee beans
  • Tea
  • Coca-cola

"list-style-position: inside;" This indicates that the bullet will be inside the list item. Since it is part of the list item, it will become part of the text and push the text out at the beginning:

  • Coffee - A brewed beverage made from roasted coffee beans
  • Tea
  • Coca-cola

Example

ul.a {
  list-style-position: outside;
}
ul.b {
  list-style-position: inside;
}

Try it yourself

Remove default settings

list-style-type:none These properties can also be used to remove markers/bullets. Note that lists also have default margins and paddings. To remove this content, add margin:0 and padding:0 :

Example

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

Try it yourself

List - Shorthand Property

list-style This property is a shorthand property. It is used to set all list properties in one declaration:

Example

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

Try it yourself

When using shorthand properties, the order of the attribute values is:

  • list-style-type(If the list-style-image is specified, this attribute value will be displayed if the image cannot be displayed for some reason)
  • list-style-position(Specify whether the list item marker should be displayed inside or outside the content flow)
  • list-style-image(Specify the image as the list item marker)

If one of the above attribute values is missing, the default value (if any) will be inserted for the missing attribute.

Set the color style of the list

We can also use color settings to style lists, making them more interesting.

Any style added to the <ol> or <ul> tags will affect the entire list, while properties added to the <li> tags will affect individual list items:

Example

ol {
  background: #ff9999;
  padding: 20px;
}
ul {
  background: #3399ff;
  padding: 20px;
}
ol li {
  background: #ffe5e5;
  padding: 5px;
  margin-left: 35px;
}
ul li {
  background: #cce5ff;
  margin: 5px;
}

Result:

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

Try it yourself

More examples

Custom list with red left border
This example demonstrates how to create a list with a red left border.
Full-screen width border list
This example demonstrates how to create a bordered list without bullet points.
All different list item markers of the list
This example demonstrates all different list item markers in CSS.

All CSS List Properties

Property Description
list-style Shorthand property. Sets all the properties of the list in one declaration.
list-style-image Specifies an image as the list item marker.
list-style-position Specifies the position of the list item marker (bullet).
list-style-type Specifies the type of marker for list items.