{ LearnWebSiteDesign.com }

HTML, HTML5, XHTML, CSS and CSS3 Tutorials

CSS List Tutorials

CSS list properties allow you to style and position list item markers and to use images as list item markers.

list-style-type Property
Values for unordered Lists

Values for ordered Lists

list-style-type Property

You can use the list-style-type property to select the style of list item markers of ordered and un-ordered lists.

Values for Un-ordered Lists

The values for un-ordered lists are listed below.

Values	Description
none	No marker is displayed
disc	This is the default value. The list item marker is a black circle.
circle	The list item marker is a circle.
square	The list item marker is a square.

Values for Ordered Lists

The values for un-ordered lists are listed below.

Value	Description
armenian	The list item marker is traditional Armenian numbering.
decimal	The list item marker is a number
decimal-leading-zero	The list item marker is a number padded by initial zeros (01, 02, 03, etc.)
georgian	The list item marker is traditional Georgian numbering (an, ban, gan, etc.)
lower-alpha	The list item marker is lower-alpha (a, b, c, d, e, etc.)
lower-greek	The list item marker is lower-greek (alpha, beta, gamma, etc.)
lower-latin	The list item marker is lower-latin (a, b, c, d, e, etc.)
lower-roman	The list item marker is lower-roman (i, ii, iii, iv, v, etc.)
upper-alpha	The list item marker is upper-alpha (A, B, C, D, E, etc.)
upper-latin	The list item marker is upper-alpha (A, B, C, D, E, etc.)
upper-roman	The list item marker is upper-roman (I, II, III, IV, V, etc.)

The code example below shows you how style list item markers of both ordered and un-ordered lists using the list-style-type property.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>LearnWebsiteDesign.com</title> <style type="text/css"> ul.none { list-style-type:none; } ul.disc { list-style-type:disc; } ul.circle { list-style-type:circle; } ol.decimal { list-style-type:decimal; } ol.decimal-leading-zero { list-style-type:decimal-leading-zero; } ol.lower-alpha { list-style-type:lower-alpha; } ol.upper-alpha { list-style-type:upper-alpha; } ol.lower-roman { list-style-type:lower-roman; } ol.upper-roman { list-style-type:upper-roman; } </style> <body> <ul class="none"> <li>list item marker: none</li> <li>list item marker: none</li> <li>list item marker: none</li> </ul> <ul class="disc"> <li>list item marker: disc</li> <li>list item marker: disc</li> <li>list item marker: disc</li> </ul> <ul class="circle"> <li>list item marker: circle</li> <li>list item marker: circle</li> <li>list item marker: circle</li> </ul> <ol class="decimal"> <li>list item marker: decimal</li> <li>list item marker: decimal</li> <li>list item marker: decimal</li> </ol> <ol class="decimal-leading-zero"> <li>list item marker: leading-leading-zero</li> <li>list item marker: leading-leading-zero</li> <li>list item marker: leading-leading-zero</li> </ol> <ol class="lower-alpha"> <li>list item marker: lower-alpha</li> <li>list item marker: lower-alpha</li> <li>list item marker: lower-alpha</li> </ol> <ol class="upper-alpha"> <li>list item marker: upper-alpha</li> <li>list item marker: upper-alpha</li> <li>list item marker: upper-alpha</li> </ol> <ol class="lower-roman"> <li>list item marker: lower-roman</li> <li>list item marker: lower-roman</li> <li>list item marker: lower-roman</li> </ol> <ol class="upper-roman"> <li>list item marker: upper-roman</li> <li>list item marker: upper-roman</li> <li>list item marker: upper-roman</li> </ol> </body> </html>

The web page that the code example creates is here: CSS List Example.

Home

Tutorials

Templates

Free Website Templates

References

CSS References