4.1 List Properties

Here we will run through some of the useful list properties:

List-Style-Image

An image can be used for the bullet in unordered lists using the list-style-image property:

ul	{list-style-image: url(images/bullet.gif);}

If you use an image, it is a good idea to declare the list-style-type also in case the user has images turned off.

List-Style-Position

The position of ordered and unordered lists can be controlled using the list-style-position property. This only has 2 values: inside or outside:

ul	{list-style-position: inside;}

List-Style-Type

The type of bullet for ordered and unordered lists can be controlled using with the list-style-type property, which has the following values:

Values for TypeFormatExample
ULdiscA solid donut (the default)
circleAn unfilled circle
squareA solid square
none None
OLdecimalNumbers1, 2 , 3
lower-alpha Lowercase Lettersa, b, c
upper-alpha Uppercase LettersA, B, C
lower-roman Lowercase Roman Numeralsi, ii, iii
upper-roman Uppercase Roman NumeralI,II,III
none None 
ul	{list-style-type: square;}

List-Style

The appearance of ordered and unordered lists can be controlled and compiled in one declaration using the list-style property (or they can still be controlled individually as above):

ul	{list-style: square;}

Styling List Selectors

Like with most HTML elements, it is also possible to add general styling properties to lists by using list tags as selectors. For example, it is possible to style the numbers or letters of an ordered list differently to the content of the list items. Some extra markup is required first in the form af wrapping the list content in <p> tags. For example:

<ol>
 <li><p>A list item;</p></li>
 <li><p>Another list item;</p></li>
 <li><p>And another list item.</p></li>
</ol>

Then in the stylesheet we can add separate styling to the ordered list and to the the paragraph tags in an ordered list. For example:

ol		{   
		font: italic 1em Georgia, Times, serif;   
    		color: #999999;   
		}   

ol p 		{   
		font: normal .8em Arial, Helvetica, sans-serif;   
		color: #000000;   
		}

This would look like this in a browser:

  1. A list item;

  2. Another list item;

  3. And another list item.