Overview of This Lesson

Now that you have a good handle on CSS, we can talk about styling lists: ordered lists, unordered lists, and description lists. You can apply any of the styling properties included in the box model, backgrounds, and text/font formatting, and you can use any of the simple or complex selectors.

Pre-Requisites

To get the most out of this lesson, you should make sure you've gone through the Combinators lesson and its pre-requisites. It's also important that you're familiar with HTML Lists.

Basic List Styling

There are a few extra, list-specific properties you can use to customize the appearance of lists.

List Style Type

The list-style-type property defines the style of bullet you want to use for your list items. The available values depends on whether the list item is in an unordered list or an ordered list.

Unordered list item style values include circle, square, and disc.

Ordered list item style values include decimal, lower-alpha, upper-alpha, lower-roman, upper-roman, and several other styles.

You can see all the different values in the MDN list-style-type documentation. Give them a try in the following CodePen:

See the Pen Untitled by Wendi Jollymore (@ProfWendi) on CodePen.

To turn off the bullet symbol completely, use the value "none". We sometimes do this when we want to display something else instead of a bullet or numeric value, but it can cause accessibility problems

List Style Position

The list-style-position property defines where the bullet should appear in relation to the list item's content. Possible values are "inside", which places the bullet inside the list item's content area, and "outside", which places the bullet outside the list item's content area.

The CodePen below shows you some examples using list style type and position. Feel free to experiment with the values:

See the Pen CSS: List Styles by Wendi Jollymore (@ProfWendi) on CodePen.

List Style Image

The list-style-image property allows you to define an image as the list bullet, instead of using one of the defaults.

When setting the image, we use the url() function. The url() function accepts an argument containing the path to the image. For example, assuming I have an images directory in my current project, I might set the bullet image as:

ul {
  list-style-image: url(images/bullet.gif);
}

The url() function can take a complete URL, also. The actual path/URL can also be enclosed in single- or double-quotes.

ul {
  list-style-image: url("images/bullet.gif");
}
/* or ... */
ul {
  list-style-image: url('http://blah.com/assets/images/bullet.gif');
}

One problem you'll find when using image bullets is that the bullets and the text often don't line up vertically. Usually the bullet appears centered in the line but the text is down at the bottom. There's a trick to fixing this, which I've demonstrated and explained in the CodePen below:

See the Pen CSS: List Style Image Trick by Wendi Jollymore (@ProfWendi) on CodePen.

List Style

You can use the list-style shorthand property to set a all three properties for a list (or even just one or two of the properties). If you give the property one value only, it will know what you're setting, since each of the three properties has a specific enumeration or type: for example, if your one value is one of the list-style-type value, it will know that you're setting that property. Similarly, if you give it only a URL, it knows that can only be for the list-style-image property.

To provide 2 or 3 values, they can go in any order! If you specify both list-style-type and list-style-image, the image is used first and if there is a problem loading the image, it will use list-style-type as the backup. Try it in this CodePen:

See the Pen CSS Lists: List Style Property by Wendi Jollymore (@ProfWendi) on CodePen.

Exercise

See the instructions in the CodePen.

See the Pen List Styling Exercise by Wendi Jollymore (@ProfWendi) on CodePen.

(Check your solution to the list styling exercise.)

Ordered Lists with Counters

You can create an ordered list with a specific counter. This can be nice if you want to use specific counter values or you want to style your numeric list bullets in a different way.

In CSS, you can create a counter variable and adjust it using special counter properties. To use a counter, you must first create it using the counter-reset property in a selector where you want to start counting. For example, if you want to have a counter for the whole page, reset the counter in the BODY selector.

body {
  counter-reset: mycounter;
}

In the code above, we start the counter create a variable called "mycounter" to store the counter value.

If you wanted to restart your counter inside every section of your document, you would put counter-reset in the SECTION element selector. In fact, you could keep track of 2 or more counters: just give them different variable names and make sure you create them where you want them to start counting.

body {
  counter-reset: mycounter;
}
section {
  counter-reset: sectioncount;
}

Once you create your counter, you need to increment it using the increment-counter property. The value of this property is the name of the counter variable you want to increment.

To access the value of your counter, you use the counter() function and pass it the name of the counter variable whose value you want to retrieve e.g. counter(mycounter).

You can even insert the value of your counter into an element on your page by using the content property. The content property inserts some content into another element using the ::before or ::after pseudo elements. ::before inserts the content before the element's content, and ::after inserts the content after the element's content. Generally, when using counters, you usually want to use ::before so you can increment the counter and then insert its value in front of the element's content.

You want to increment your counter at the start of a particular element, so we often use the ::before pseudo element to increment our counter before a certain element and insert its value into the document. For example, say you have some paragraph elements containing level-3 headings inside a DIV and you want to count each paragraph in the DIV, displaying the counter in the heading:

div {
  counter-reset: mycounter;
}
h3::before {
  counter-increment: mycounter;  /* increment mycounter */
  content: counter(mycounter) ": "; /* insert the counter value followed by colon/space */
}

The CSS code above will create a counter and increment it every time it gets to an H3 element. Then it will insert the counter value followed by ": " in the beginning of the H3's content.

This example shows you how the counter works. Notice that I've used a ".container" class selector for the outer DIV element, and that's where I'm resetting my counter. See how that starts the counting over for the second .container DIV!

See the Pen CSS Counters 1 by Wendi Jollymore (@ProfWendi) on CodePen.

Here's an example that uses 2 counters.

See the Pen CSS Counters 2 by Wendi Jollymore (@ProfWendi) on CodePen.

You can do the same kind of thing with lists. If you want your lists to restart counting each time you use OL, just reset your counter in each OL element:

If you want your counter to continue counting between lists, just reset your counter in the BODY selector.

See the Pen CSS Counters: Lists by Wendi Jollymore (@ProfWendi) on CodePen.