Learn how to build and design websites with our tutorials.

CSS Lists Tutorial

View Tutorial Contents


This CSS tutorial will show you how to style standard vertical HTML lists.

Types of HTML Lists

There are three types of lists in HTML: un-ordered lists, ordered lists and description lists.


CSS Lists Padding and Margin

When styling lists, one of the things that you should do is remove their padding and margin. The reason is that some web browsers add some amount of padding and margin to set the amount of indentation. By removing the padding and margin, your lists will have a consistent look and feel.

It is recommended that you remove the padding and margin from both the <ul> and the <li> elements.

The CSS example shows you how to remove the padding and margin from lists.


ul, li{
margin: 0;
padding: 0;
}


CSS List Style Properties

CSS list style properties allow you to:

The CSS list properties and their value descriptions are listed below.

Property Description
list-style Sets all the properties for a list in one declaration
list-style-image Specifies an image as the list-item marker
list-style-position Specifies if the list-item markers should appear inside or outside the content flow
list-style-type Specifies the type of list-item marker

CSS List Item Markers

One of the things that CSS allows you to do is style or remove list item markers.

Both the longhand CSS list-style-type property and the shorthand CSS list-style property allow you to set different list item markers for ordered lists and un-ordered lists.

Definition lists do not have list item markers.


CSS Un-ordered List Item Markers

The table below lists the values of the list-style-type property for un-ordered <ul> lists.

Value Description
disc black colored disk, default for un-ordered lists
none no marker is shown
circle the marker is an empty circle
square the marker is a square
initial Sets the property to its default value
inherit Inherits the property from its parent element

The CSS example below shows you how to specify list item markers for un-ordered list items using the longhand list-style-type property.

Notice in particular that I have added a left margin of 20px to the un-ordered list with the list item property with a value of disc. This is because the list item markers will be displayed outside of the list element. This will cause the list item markers to be outside of view on smaller screens.


ul.disc{
margin: 10px 0 10px 20px;
padding: 0;
}
ul.disc li{
list-style-type: disc;
margin: 0;
padding: 0;
}

The CSS example below shows you how to specify list item markers for un-ordered list items using the shorthand list-style property.

Notice in particular that I have added a left margin of 20px to the un-ordered list with the list item property with a value of disc. This is because the list item markers will be displayed outside of the list element. This will cause the list item markers to be outside of view on smaller screens.


ul.none{
margin: 10px 0 10px 20px;
padding: 0;
}
ul.none li{
list-style: none;
margin: 0;
padding: 0;
}


CSS Ordered List Item Markers

The table below lists the values of the list-style-type property for ordered <ol> lists.

There are other list-style-type property values as well, but they are not fully supported by all web browser (Internet Explorer and Opera)

Value Description
decimal-leading-zero The marker is a number with leading zeros (01., 02., 03., etc.)
decimal The marker is a number (1., 2., 3., )
lower-latin The marker is lower-latin (a., b., c., d., e., etc.)
lower-roman The marker is lower-roman (i., ii., iii., iv., v., etc.)
upper-alpha The marker is upper-alpha (A., B., C., D., E., etc.)
upper-latin The marker is upper-latin (A., B., C., D., E., etc.)
upper-roman The marker is upper-roman (I., II., III., IV., V., etc.)
none no marker is shown
initial Sets the property to its default value
inherit Inherits the property from its parent element

The CSS example below shows you how to specify list item markers for ordered list items using the longhand list-style-type property.

Notice in particular that I have added a left margin of 20px to the un-ordered list with the list item property with a value of disc. This is because the list item markers will be displayed outside of the list element. This will cause the list item markers to be outside of view on smaller screens.


ol.decimal{
margin: 10px 0 10px 20px;
padding: 0;
}
ol.decimal li{
list-style-type: decimal;
margin: 0;
padding: 0;
}

  1. This is an ordered list with a decimal style list item marker
  2. This is an ordered list with a decimal style list item marker
  3. This is an ordered list with a decimal style list item marker

The CSS example below shows you how to specify list item markers for ordered list items using the shorthand list-style property.

Notice in particular that I have added a left margin of 20px to the un-ordered list with the list item property with a value of disc. This is because the list item markers will be displayed outside of the list element. This will cause the list item markers to be outside of view on smaller screens.


ol.upper-alpha{
margin: 10px 0 10px 20px;
padding: 0;
}
ol.upper-alpha li{
list-style: upper-alpha;
margin: 0;
padding: 0;
}

  1. This is an ordered list with an upper-alpha style list item marker
  2. This is an ordered list with an upper-alpha style list item marker
  3. This is an ordered list with an upper-alpha style list item marker

Using Images As List Item Markers

There are two ways that you can use an image as a list item marker. By using the list-style-image property and by applying background properties to the list item (<li>).

It is recommended that you use the background properties to use an image as a list item marker instead of using the list-style-image property. The reason is because using background properties allows you have control over the placement of the image and using the list-style-image property does not.

You may also want adjust the padding, line-height and height properties of the <li> tag to your liking.

The CSS example below shows you how to use an image as a list item marker using background properties. Notice that the properties are applied to the <li> element.


ul{
margin: 10px 0 10px 0;
padding: 0;
}
ul li{
list-style-type: none;
margin: 0;
padding: 5px 0 5px 25px;
line-height: 1.3em;
height: 1.5em;
background: url("../images/blue-check-mark.png") 0 0 no-repeat;
}

The CSS example should output a list like the one shown below.