CSS Lists

CSS provides us several properties which can be used to style and format the CSS lists. These list properties provide us full control to change the marker type, its position in the list, distance between the text and marker, and much more for both, ordered and unordered lists.

In this CSS tutorial, we will discuss all these properties in detail. So, let’s get started.

Chang the Marker Type of CSS Lists

By default, the items of an ordered list are marked using integers(1, 2, 3, 4…), whereas, the items of an unordered list are marked using bullets(•).

See both type of lists below:

1. Ordered list item1
2. Ordered list item2

• Unordered list item1
• Unordered list item2

You can change these default marker types to any other marker type such as circle, square, lower-roman, lower-alpha, etc. using CSS list-style-type property. Try out the example below to check how it works:

Example:

.ul1 {
  list-style-type: circle;
}
.ul2{
  list-style-type: square;
}
.ol1{
  list-style-type: lower-roman;
}
.ol2{
  list-style-type: lower-alpha;
}

Chang the Position of CSS List Markers

CSS list-style-position property specifies the position of the marker.

The default position of marker is outside the list items. See the example below:

• First Item
• Second Item

However, you can also position these markers inside of the list items. This is done by setting the list-style-position property to inside. Refer to the example below:

• First Item
• Second Item

Example:

.ul1{
  list-style-position: outside;
}
.ul2{
  list-style-position: inside;
}

Set Image as a List Marker

It is also possible to set an image as a list marker using the list-style-image property.

The below example replaces the default bullet(•) marker with the ‘drop.jpg’ for all the list items. Try it out to see how it works:

Example:

ul{
  list-style-image: url('images/drop.jpg');
}

CSS List Shorthand Property

Instead of specifying each list property individually, we can combine them in a single shorthand property called list-style.

The list-style property is a shorthand of the following list properties:

• list-style-type
• list-style-position
• list-style-image

Example:

ul{
  list-style: circle inside url('images/drop.jpg')
}

If any of the three values is missing, its default value is used.

Example:

ul{
  list-style: url('images/drop.jpg');
}

Explanation: In the example above, we have not specified any value for the list-style-type and list-style-position. Therefore, the browser will use their default values i.e. bullet for list-style-type and outside for list-style-position property.

All List Properties