CSS List Styling

list-style-type
- list-style-type : ul
- list-style-type : ol
list-style-position
padding
list-style-image
Background Images on List Items
display

Jakob Jenkov
Last update: 2014-08-11

CSS contains a set of properties specifically targeted at styling HTML lists. By HTML lists I mean the ul and ol elements. In this text I will cover what these list styling CSS properties are, and what you can do with them.

list-style-type

The list-style-type CSS property controls the bullets used by the ul element, and the numbering used by the ol element. The following sections look at both the ul and ol element.

list-style-type : ul

For the ul element you can use these property values:

disc
circle
square

Here is how you set the list-style-type for a list element:

ul {
    list-style-type: disc;
}

This example sets the list-style-type CSS property to disc for all ul elements.

Here is how the possible values (disc, circle and square) look when applied to a ul element:

disc
circle
square

It is actually possible to apply the list-style-type CSS property to each li element, instead of to the whole ul element. Here is how that looks in code:

<ul>
    <li style="list-style-type: disc;"><code>disc</code></li>
    <li style="list-style-type: circle;"><code>circle</code></li>
    <li style="list-style-type: square;"><code>square</code></li>
</ul>

The result will look like the example above that shows the three different bullet types (disc, circle and square).

list-style-type : ol

The list-style-type CSS property can also be used to style ol elements. Instead of bullets you can set what kind of numbering scheme the ol element is to use. The valid values for the list-style-type property for ol elements are:

decimal
decimal-leading-zero
upper-alpha
lower-alpha
upper-roman
lower-roman
lower-greek

Here is a CSS rule setting the list-style-type to upper-alpha:

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

These following lists show how the number scheme looks with the 6 different possible values.

decimal
decimal
decimal

decimal-leading-zero
decimal-leading-zero
decimal-leading-zero

upper-alpha
upper-alpha
upper-alpha

lower-alpha
lower-alpha
lower-alpha

upper-roman
upper-roman
upper-roman

lower-roman
lower-roman
lower-roman

upper-latin
upper-latin
upper-latin

lower-latin
lower-latin
lower-latin

lower-greek
lower-greek
lower-greek

list-style-position

The list-style-position CSS property is used to set the position of the bullet or numbers. The list-style-position CSS property can take one of 2 values:

inside
outside

Here is an example that sets the list-style-position to outside:

ul {
    list-style-position: outside;
}

Here are two unordered lists - one with the list-style-position set to inside and one set to outside.

This text uses the value inside which is especially visible when the text for a list item spans more than one line. This text uses the value inside which is especially visible when the text for a list item spans more than one line.
This text uses the value inside which is especially visible when the text for a list item spans more than one line. This text uses the value inside which is especially visible when the text for a list item spans more than one line.

This text uses the value outside. This text uses the value outside. This text uses the value outside. This text uses the value outside.
This text uses the value outside. This text uses the value outside. This text uses the value outside. This text uses the value outside.

Notice how the value inside renders the bullet as part of the list item text. When the list item text spans more than one line, the text wraps and starts under the bullet.

With the avlue outside the bullet is rendered separately from the text. The text wraps and starts under the text, not the bullet, when the text spans multiple lines.

padding

You can increase the distance between the bullet or number and the text for the corresponding list item by setting the padding CSS properties for the li elements. Here is an example:

<ul>
    <li style="padding-left: 20px">With padding</li>
    <li>Without padding</li>
</ul>

This example sets the padding-left to 20px. If the ul or ol element has the list-style-position set to outside (or omitted), then setting the padding-left property of the li element will increase the space between the bullet / number and the text. Here is how that looks on a live ul element:

With padding
Without padding

If, however, the ul or ol element has the list-style-position CSS property set to inside, then the padding will be applied before the bullet / number, because the bullet / number is considered rendered inside the li element. Padding set on the li element is then rendered to the left of the bullet. Here is how that looks on a live ul element:

With padding
Without padding

The padding CSS properties can also be used to set the distance between individual li elements. Here is an example:

<style>
    ul>li {
        padding-bottom: 20px;
    }
</style>

<ul>
    <li>Item one</li>
    <li>Item two</li>
</ul>

This example sets the bottom padding of each list item (li element) to 20px. Thus, there will be 20px of blank space below each li element.

Here is how that looks applied to a live ul element:

Item one
Item two

In some browsers you may have to use the margin CSS properties instead of the padding CSS properties to make distance between the li elements.

list-style-image

The list-style-image CSS property can set an image to be used as bullet inside ul elements, instead of the three built-in options (disc, circle, square). Here is a list-style-image example:

ul {
    list-style-image : url('/images/arrow-right.png');
}

Here is how a ul element looks like with that list-style-image value:

One
Two
Three

Background Images on List Items

The list-style-image CSS property does not give you control over the positioning of the image used as bullet. However, if you set list-style-type to none, then the list will not have any bullets drawn by default. You can then set a background image on each list item and use that background image as bullet. Here is a list item (li) background image example:

ul>li {
    padding-left        : 25px;
    background-image    : url('/images/arrow-right.png');
    background-position : 5px 5px;
    background-repeat   : no-repeat;
}

Here is how a list would look with that CSS applied:

One
Two
Three

You can read more about setting background images for HTML elements in my tutorial about setting background images in CSS.

display

You can use the display CSS property to change how lists are rendered. By setting display for li elements to inline, the list items will be rendered as a horizontal list instead of a vertical list. Here is a list display: inline example:

ul>li {
    display: inline;
}

Here is how the list looks when rendered:

One
Two
Three

Notice how the list items "One", "Two" and "Three" are now rendered on the same horizontal line, instead of each item on its own line. Notice also that the bullets are not displayed. This is the default behaviour when the browser renders a list using display:inline on the li elements.

You can also use the inline-block value instead of inline. Then you can set the width and height of the li elements (display: inline normally disables control over the width and height of elements). Here is an example:

ul>li {
    display: inline-block;
}

Here is how the list looks when rendered with display: inline-block applied to its li elements:

One
Two
Three

It looks quite similar to the display: inline, as expected, but gives you control over the width and height of the li items using the width and height CSS properties. Here is an example that sets the width of each li element to 100px:

ul>li {
    display: inline-block;
    width  : 100px;
}

Here is how the list would look when rendered:

One
Two
Three

Notice how each list item now takes up 100px in the width.

Next: CSS Table Styling

Tweet
	Jakob Jenkov