CSS List Tutorials

CSS allows you to place the list item marker, choose different styles of list item markers or set an image as the list item marker.

Using an Image as a List Item Marker

CSS allows you to use an image as a list item marker with the use of the "list-style-image" attribute, as shown below:

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

The method shown above, however, will be not be displayed the same in all web browsers. The positioning of the images, the ones used as the list item markers, will be positioned slightly different.

A more precise way to position the images is by using a background image on each list item, like in the example shown below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>Your Title</title> </head> <style type="text/css"> ul { margin: 0; padding: 0; } #ul li { margin: 0; padding: 0 0 0 25px; //this is a left padding of 25 pixels display: block; background: url("image.jpg") 0 0 no-repeat; } </style> <html> <body> <ul> <li>list item</li> <li>list item</li> </ul> </body> </html>

The code above produces the list below.

  • list item
  • list item

Un-Ordered List Item Markers

The "list-item-type" property allows you to specify the type of list item marker.

Note: Different web browsers display list item markers differently and the Firefox web browser does not display un-ordered lists correctly. If you would like to use list item markers, I recommend using images as list item markers.

The code below shows you how to specify un-ordered list item markers. property.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>Your Title</title> </head> <style type="text/css"> ul.none { margin: 0 0 0 20px; padding: 0; list-style-type: none; display: list-item; } ul.circle { margin: 0 0 0 20px; padding: 0; list-style-type: circle; display: list-item; } ul.disc { margin: 0 0 0 20px padding: 0; list-style-type: disc; display: list-item; } ul.square { margin: 0 0 0 20px; padding: 0; list-style-type: square; display: list-item; } </style> <html> <body> <ul class="none"> <li>list item</li> <li>list item</li> </ul> <ul class="circle"> <li>list item</li> <li>list item</li> </ul> <ul class="disc"> <li>list item</li> <li>list item</li> </ul> <ul class="square"> <li>list item</li> <li>list item</li> </ul> </body> </html>

The code above produces the lists below.

  • list item
  • list item
  • list item
  • list item
  • list item
  • list item
  • list item
  • list item

The code below shows you how to specify ordered list item markers.

Note: Different web browsers will display ordered lists numbers differently.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>Your Title</title> </head> <style type="text/css"> ul.none { margin: 0 0 0 20px; padding: 0; list-style-type: none; display: list-item; } ul.circle { margin: 0 0 0 20px; padding: 0; list-style-type: circle; display: list-item; } ul.disc { margin: 0 0 0 20px padding: 0; list-style-type: disc; display: list-item; } ul.square { margin: 0 0 0 20px; padding: 0; list-style-type: square; display: list-item; } </style> <html> <body> <ul class="upper-roman"> <li>list item</li> <li>list item</li> </ul> </body> </html>

The code above produces the ordered lists below.

  1. list item
  2. list item
  3. list item
  1. list item
  2. list item
  3. list item
  1. list item
  2. list item

Display Lists as Inline or Block Elements

CSS allows you to display a list as an inline element or as a block element with the use of the "display" property.

The code below shows you how to create a list that is displayed as an inline element with the use of the "display: inline" property and value pair.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>Your Title</title> </head> <style type="text/css"> ul.inline { margin: 0 0 0 20px; padding: 0; } ul.inline li { display: inline; margin: 0; padding: 0; } </style> <html> <body> <ul class="inline"> <li>list item</li> <li>list item</li> </ul> </body> </html>

The code above creates the list below.

  • list item
  • list item

The code below shows you how to create a list that is displayed as a block element with the use of the "display: block" property and value pair.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>Your Title</title> </head> <style type="text/css"> ul.block { margin: 0 0 0 20px; padding: 0; } ul.block li { display: block; margin: 0; padding: 0; } </style> <html> <body> <ul class="block"> <li>list item</li> <li>list item</li> </ul> </body> </html>

The code above creates the list below.

  • list item
  • list item

Web Hosting Resources

Free Website Templates