Working with list styles

Choosing a list style type

The list-style-type attribute allows you to choose the type of label to display alongside text formatted with the <ul>, <ol>, or <li> tags. The syntax is:

list-style-type : style

Possible values of style are listed below:

Style valueResult
disc (default)
  •  
circle
  •  
square
  •  
decimal 1, 2, 3, ...
decimal-leading-zero 01, 02, 03, ...
lower-roman i, ii, iii, ...
upper-roman I, II, III, ...
lower-alpha a, b, c, ...
upper-alpha A, B, C, ...




Using a list style image

You can create your own label for list elements with an image file and the list-style-image attribute as follows:

list-style-image : url(URL)

where URL is the location of the image file.

Example:

StyleResult
<ul>
  <li style="list-style-image:url(dot4.gif)"> Item 1 </li>
  <li style="list-style-image:url(button02.gif)"> Item 2 </li>
</ul>
  • First item
  • Second item

Note that this attribute is not supported by Netscape version 4.7 or earlier.




Defining the list style position

The syntax for specifying the the location of the item label is:

list-style-position: location

where location is either "inside" of "outside" (default).

Example:

list-style-position: inside list-style-position: outside
  • Positioning the item label inside the surrounded box
  • Positioning the item label outside the surrounded box




The list-style attribute

One can combine all the above attributes in one list-style attribute. The syntax for the list-style attribute is:

list-style: list-style-type list-style-image list-style-position

You do not need to specify all the attributes, but those that you specify must follow the above order. Otherwise, the results might me unpredictable.

Example:

StyleResult
list-style: circle url(dot4.gif) inside
  • This is
    a list item

The label in the above example will be displayed as circle unless the browser supports the use of graphical bullets.