Blog : CSS List

CSS List


The CSS list properties allow you to place the list item marker, change between different list item markers, or set an image as the list item marker.


List

In HTML, there are two types of lists:

  • unordered list - the list items are marked with bullets (typically circles or squares)
  • ordered list - the list items are marked with numbers or letters

With CSS, lists can be styled further, and images can be used as list item markers.


Different List Item Markers

It is possible to specify the type of list item marker with the list-style-type property:

Example

ul.circle {list-style-type:circle}
ul.square {list-style-type:square}

ol.upper-roman {list-style-type:upper-roman}
ol.lower-alpha {list-style-type:lower-alpha}

Some of the values are for unordered lists, and some for ordered lists.

Unordered List - Possible Values

Value Description
none No marker
disc Default. The marker is a filled circle
circle The marker is a circle
square The marker is a square

Ordered List - Possible Values

Value Description
none No marker
circle The marker is a circle
disc The marker is a filled circle. This is default
square The marker is a square
armenian The marker is traditional Armenian numbering
decimal The marker is a number
decimal-leading-zero The marker is a number padded by initial zeros (01, 02, 03, etc.)
georgian The marker is traditional Georgian numbering (an, ban, gan, etc.)
lower-alpha The marker is lower-alpha (a, b, c, d, e, etc.)
lower-greek The marker is lower-greek (alpha, beta, gamma, etc.)
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.)

Internet Explorer does not support all property values for ordered lists.


Positioning the List

The list-style-position property specifies the indentation of a list.

"outside" is the default value. The "inside" value further indents the list:

Example

ul.inside {list-style-position:inside}
ul.outside {list-style-position:outside}



Using an Image as List Item Marker

It is also possible to use an image as a list item marker:

Example

ul
{
list-style-image:url('arrow.gif');
}

The example above will not show the exact same result in all browsers. IE and Opera will display the images slightly higher than in Firefox, Chrome, and Safari.

The example above will be fine for most occasions. However, there is a way to position the image more precisely.

For the same result in all browsers, you will have to use a background image on each list item, like this:

Example

ul
{
list-style-type:none;
padding:0px;
margin:0px;
}
li
{
background-image:url(arrow.gif);
background-repeat:no-repeat;
background-position:0px 5px;
padding-left:14px;
}

Example explained:

  • For ul:
    • Set the list-style-type to none to remove the list item marker
    • Both padding and margin must be set to 0px for cross-browser compatibility
  • For li:
    • Set the URL of the image, and show it only once (no-repeat)
    • Use the background-position property to place the image where you want it (left 0px and down 5px)
    • Use the padding-left property to position the text in the list

List - Shorthand property

It is possible to specify all the list properties in a single property. This is called a shorthand property.

The shorthand property for list is "list-style":

Example

list-style:square inside;

When using the shorthand property, the order of the values are:

  • list-style-type
  • list-style-position
  • list-style-image

It does not matter if one of the values above are missing, as long as the rest are in the specified order.



More Examples

The different list-item markers in lists
This example demonstrates the different list-item markers in CSS.


All CSS List Properties

The number in the "CSS" column indicates in which CSS version the property is defined (CSS1 or CSS2).

Property Description Values CSS
list-style Sets all the properties for a list in one declaration list-style-type
list-style-position
list-style-imageinherit
1
list-style-image Specifies an image as the list-item marker URL
none
inherit
1
list-style-position Specifies where to place the list-item marker inside
outside
inherit
1
list-style-type Specifies the type of list-item marker none
disc
circle
square
decimal
decimal-leading-zero
armenian
georgian
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
lower-roman
upper-roman
inherit
1