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:
Possible values of style are listed below:
| Style value | Result |
|---|---|
| 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, ... |
You can create your own label for list elements with an image file and the list-style-image attribute as follows:
where URL is the location of the image file.
Example:
| Style | Result |
|---|---|
<ul> <li style="list-style-image:url(dot4.gif)"> Item 1 </li> <li style="list-style-image:url(button02.gif)"> Item 2 </li> </ul> |
|
Note that this attribute is not supported by Netscape version 4.7 or earlier.
The syntax for specifying the the location of the item label is:
where location is either "inside" of "outside" (default).
Example:
| list-style-position: inside | list-style-position: outside |
|---|---|
|
|
One can combine all the above attributes in one list-style attribute. The syntax for the list-style attribute is:
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:
| Style | Result |
|---|---|
| list-style: circle url(dot4.gif) inside |
|
The label in the above example will be displayed as circle unless the browser supports the use of graphical bullets.
<== Back to Course