CSS

Working with Lists in CSS
Previous Home Next

The CSS list properties allow you to:

  1. Ordered lists - for different list item markers for
  2. Unordered lists - for different list item markers for

List

With CSS, lists can be styled further, and images can be used as the list item marker. The type of list item marker is specified with the list-style-type property:

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

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

Values for Unordered Lists

ValueDescription
discDefault.The marker is a filled circle
noneNo marker
circleThe marker is a circle
squareThe marker is a square

 

Values for Ordered Lists

ValueDescription
armenianThe marker is traditional Armenian numbering
decimalThe marker is a number
decimal-leading-zeroThe marker is a number padded by initial zeros (01, 02, 03, etc.)
georgianThe marker is traditional Georgian numbering (an, ban, gan, etc.)
lower-alphaThe marker is lower-alpha (a, b, c, d, e, etc.)
lower-greekThe marker is lower-greek (alpha, beta, gamma, etc.)
lower-latinThe marker is lower-latin (a, b, c, d, e, etc.)
lower-romanThe marker is lower-roman (i, ii, iii, iv, v, etc.)
upper-alphaThe marker is upper-alpha (A, B, C, D, E, etc.)
upper-latinThe marker is upper-latin (A, B, C, D, E, etc.)
upper-romanThe marker is upper-roman (I, II, III, IV, V, etc.)
Previous Home Next