Styling lists

Lists behave like any other text for the most part, but there are some CSS properties specific to lists that you need to know about, as well as some best practices to consider. This article explains all.

Prerequisites:Structuring content with HTML and CSS Styling basics.
Learning outcomes:
  • Spacing list items, for example with margin or line height.
  • Using list-style properties.

A simple list example

To begin with, let's look at a simple list example. Throughout this article, we'll look at unordered, ordered, and description lists — all have styling features that are similar, as well as some that are particular to themselves. The unstyled example is available on GitHub (check out the source code too.)

The HTML for our list example looks like so:

html
<h2>Shopping (unordered) list</h2>

<p>
  Paragraph for reference, paragraph for reference, paragraph for reference,
  paragraph for reference, paragraph for reference, paragraph for reference.
</p>

<ul>
  <li>Hummus</li>
  <li>Pita</li>
  <li>Green salad</li>
  <li>Halloumi</li>
</ul>

<h2>Recipe (ordered) list</h2>

<p>
  Paragraph for reference, paragraph for reference, paragraph for reference,
  paragraph for reference, paragraph for reference, paragraph for reference.
</p>

<ol>
  <li>Toast pita, leave to cool, then slice down the edge.</li>
  <li>
    Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
  </li>
  <li>Wash and chop the salad.</li>
  <li>Fill pita with salad, hummus, and fried halloumi.</li>
</ol>

<h2>Ingredient description list</h2>

<p>
  Paragraph for reference, paragraph for reference, paragraph for reference,
  paragraph for reference, paragraph for reference, paragraph for reference.
</p>

<dl>
  <dt>Hummus</dt>
  <dd>
    A thick dip/sauce generally made from chick peas blended with tahini, lemon
    juice, salt, garlic, and other ingredients.
  </dd>
  <dt>Pita</dt>
  <dd>A soft, slightly leavened flatbread.</dd>
  <dt>Halloumi</dt>
  <dd>
    A semi-hard, unripened, brined cheese with a higher-than-usual melting
    point, usually made from goat/sheep milk.
  </dd>
  <dt>Green salad</dt>
  <dd>That green healthy stuff that many of us just use to garnish kebabs.</dd>
</dl>

If you go to the live example now and investigate the list elements using browser developer tools, you'll notice a couple of styling defaults:

Handling list spacing

When styling lists, you need to adjust their styles so they keep the same vertical spacing as their surrounding elements (such as paragraphs and images; sometimes called vertical rhythm), and the same horizontal spacing as each other (you can see the finished styled example on GitHub, and find the source code too).

The CSS used for the text styling and spacing is as follows:

css
/* General styles */

html {
  font-family: "Helvetica", "Arial", sans-serif;
  font-size: 10px;
}

h2 {
  font-size: 2rem;
}

ul,
ol,
dl,
p {
  font-size: 1.5rem;
}

li,
p {
  line-height: 1.5;
}

/* Description list styles */

dd,
dt {
  line-height: 1.5;
}

dt {
  font-weight: bold;
}

List-specific styles

Now that we've looked at general spacing techniques for lists, let's explore some list-specific properties. There are three properties you should know about to start with, which can be set on <ul> or <ol> elements:

Bullet styles

As mentioned above, the list-style-type property allows you to set what type of bullet to use for the bullet points. In our example, we've set the ordered list to use uppercase roman numerals with:

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

This gives us the following look:

an ordered list with the bullet points set to appear outside the list item text.

You can find a lot more options by checking out the list-style-type reference page.

Bullet position

The list-style-position property sets whether the bullets appear inside the list items, or outside them before the start of each item. The default value is outside, which causes the bullets to sit outside the list items, as seen above.

If you set the value to inside, the bullets will sit inside the lines:

css
ol {
  list-style-type: upper-roman;
  list-style-position: inside;
}

an ordered list with the bullet points set to appear inside the list item text.

Using a custom bullet image

The list-style-image property allows you to use a custom image for your bullet. The syntax is pretty simple:

css
ul {
  list-style-image: url("star.svg");
}

However, this property is a bit limited in terms of controlling the position, size, etc. of the bullets. You are better off using the background family of properties, which you learned about in our previous Backgrounds and borders lesson.

In our finished example, we have styled the unordered list like so (on top of what you've already seen above):

css
ul {
  padding-left: 2rem;
  list-style-type: none;
}

ul li {
  padding-left: 2rem;
  background-image: url("star.svg");
  background-position: 0 0;
  background-size: 1.6rem 1.6rem;
  background-repeat: no-repeat;
}

Here we've done the following:

This gives us the following result:

an unordered list with the bullet points set as little star images

list-style shorthand

The three properties mentioned above can all be set using a single shorthand property, list-style. For example, the following CSS:

css
ul {
  list-style-type: square;
  list-style-image: url("example.png");
  list-style-position: inside;
}

Could be replaced by this:

css
ul {
  list-style: square url("example.png") inside;
}

The values can be listed in any order, and you can use one, two, or all three (the default values used for the properties that are not included are disc, none, and outside). If both a type and an image are specified, the type is used as a fallback if the image can't be loaded for some reason.

Controlling list counting

Sometimes you might want to count differently on an ordered list — e.g., starting from a number other than 1, or counting backwards, or counting in steps of more than 1. HTML and CSS have some tools to help you here.

start

The start attribute allows you to start the list counting from a number other than 1. The following example:

html
<ol start="4">
  <li>Toast pita, leave to cool, then slice down the edge.</li>
  <li>
    Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
  </li>
  <li>Wash and chop the salad.</li>
  <li>Fill pita with salad, hummus, and fried halloumi.</li>
</ol>

Gives you this output:

reversed

The reversed attribute will start the list counting down instead of up. The following example:

html
<ol start="4" reversed>
  <li>Toast pita, leave to cool, then slice down the edge.</li>
  <li>
    Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
  </li>
  <li>Wash and chop the salad.</li>
  <li>Fill pita with salad, hummus, and fried halloumi.</li>
</ol>

Gives you this output:

Note: If there are more list items in a reversed list than the value of the start attribute, the count will continue to zero and then into negative values.

value

The value attribute allows you to set your list items to specific numerical values. The following example:

html
<ol>
  <li value="2">Toast pita, leave to cool, then slice down the edge.</li>
  <li value="4">
    Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
  </li>
  <li value="6">Wash and chop the salad.</li>
  <li value="8">Fill pita with salad, hummus, and fried halloumi.</li>
</ol>

Gives you this output:

Note: Even if you are using a non-number list-style-type, you still need to use the equivalent numerical values in the value attribute.

Styling a nested list

It is time for you to complete another task. This time we want you to take what you've learned above and have a go at styling a nested list.

  1. Click "Play" in the code block below to edit the example in the MDN Playground.
  2. Style the unordered list with square bullets.
  3. Give the unordered list items and the ordered list items a line-height of 1.5 of their font-size.
  4. Set the ordered list to have lower alphabetical bullets.
  5. Feel free to play with the list example as much as you like, experimenting with bullet types, spacing, or whatever else you fancy using.

If you make a mistake, you can clear your work using the Reset button in the MDN Playground. If you get really stuck, you can view the solution below the example output.

html
<ul>
  <li>First, light the candle.</li>
  <li>Next, open the box.</li>
  <li>
    Finally, place the three magic items in the box, in this exact order, to
    complete the spell:
    <ol>
      <li>The book of spells</li>
      <li>The shiny rod</li>
      <li>The goblin statue</li>
    </ol>
  </li>
</ul>
css
Click here to show the solution

Your finished CSS should look something like this:

css
ul {
  list-style-type: square;
}

li {
  line-height: 1.5;
}

ol {
  list-style-type: lower-alpha;
}

Summary

Lists are relatively easy to get the hang of styling once you know a few associated basic principles and specific properties. In the next article, we'll move on to link styling techniques.