CSS list

09.Jan.2011

Designing CSS list can be very easy when you know all properties allowed.

To style CSS list, use following values for list-style-type property:

ValueDescription
noneCSS list with no style
discCSS list with filled circle
circleCSS list with circle
squareCSS list with square
armenianCSS list with traditional Armenian numbering
decimalCSS list with a number
decimal-leading-zeroCSS list with a number padded by initial zeros (01, 02, 03, etc.)
georgianCSS list with Georgian numbering (an, ban, gan, etc.)
lower-alphaCSS list with lower-alpha (a, b, c, d, e, etc.)
lower-greekCSS list with lower-greek (alpha, beta, gamma, etc.)
lower-latinCSS list with lower-latin (a, b, c, d, e, etc.)
lower-romanCSS list with lower-roman (i, ii, iii, iv, v, etc.)
upper-alphaCSS list with upper-alpha (A, B, C, D, E, etc.) 
upper-latinCSS list with upper-latin (A, B, C, D, E, etc.)
upper-romanCSS list with upper-roman (I, II, III, IV, V, etc.)

Except these predefined values, you can use custom images as in following snippet:

ul {
    list-style-image: none;
}
 
li {
    background: url('smiley.png') no-repeat top left;
    margin-left: 0 0 0 18px;
}