Styling Lists

Types of lists

In HTML, there are two list types: Unordered lists (<ul>) are list items that use bullet points:

• Coffee
• Tea
• Biscuits

Ordered lists <ol> are list items that are numbered (or use i., ii., and iii.):

1. Coffee
2. Tea
3. Biscuits

Each item is given the <li> tag, like in the example below:

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Biscuits</li>
</ol>

We use lists all the time when building on the web. Most navigation menus are HTML lists, which have been styled using CSS.

How to style lists with CSS

CSS has several properties that we can use for styling. We can set different list item markers, use images as markers, and add colors and background colors.

The list-style-type property

We use list-style-type to set a marker for our list:

li {
  list-style-type: square;
}

There are many possible values, such as circle, square, decimal, upper-roman and none.

Note: If you don’t set the color of the list marker, it’ll default to whatever the element color is.

We can also set the list-style-type property to none to delete these markers.

The list-style-position property

With the list-style-position property, we can move the marker to be outside or inside the list content:

li {
  list-style-position: outside;
}

li {
  list-style-position: inside;
}

For example, when using inside with lists of text, each marker is contained within the text box, indenting the first line of text for each list item.