CSS List
The CSS list properties allow you to place the list-item
marker, change between different list-item markers,
or set an image as the list-item marker.
Examples
The different list-item
markers in unordered lists
This example demonstrates the different list-item markers in CSS.
The different list-item
markers in ordered lists
This example demonstrates the different list-item markers in CSS.
All
the list style types
This example demonstrates all the different list-item markers in CSS.
Set an image as the
list-item marker
This example demonstrates how to set an image as the list-item marker.
Place the list-item
marker
This example demonstrates where to place the list-item marker.
All list properties in one
declaration
This example demonstrates a shorthand property for setting all of the properties
for a list in one declaration.
CSS List Properties
The CSS list properties allow you to place the list-item marker, change between different list-item markers,
or set an image as the list-item marker.
Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.
W3C: The number in the "W3C" column indicates in which CSS recommendation
the property is defined (CSS1 or CSS2).
| Property |
Description |
Values |
IE |
F |
N |
W3C |
| list-style |
A shorthand property for setting all of the properties for
a list in one declaration |
list-style-type
list-style-position
list-style-image |
4 |
1 |
6 |
1 |
| list-style-image |
Sets an image as the list-item marker |
none
url |
4 |
1 |
6 |
1 |
| list-style-position |
Sets where the list-item marker is placed in the list |
inside
outside |
4 |
1 |
6 |
1 |
| list-style-type |
Sets the type of the list-item marker |
none
disc
circle
square
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
hebrew
armenian
georgian
cjk-ideographic
hiragana
katakana
hiragana-iroha
katakana-iroha |
4 |
1 |
4 |
1 |
| marker-offset |
|
auto
length |
|
1 |
7 |
2 |
|
