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.
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
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
upper-roman, and several other styles.
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
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
The CodePen below shows you some examples using list style type and
position. Feel free to experiment with the values:
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:
The url() function can take a complete URL, also. The actual path/URL
can also be enclosed in single- or double-quotes.
/* or ... */
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
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:
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:
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.
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.
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:
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!