CSS Li
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 |
The list-style property is a shorthand property for setting all the properties for a list in one declaration.
Inherited: Yes
Example
ul
{
list-style: disc outside
}
ol
{
list-style: decimal inside
} |
Possible Values
Value |
Description |
list-style-type
list-style-position
list-style-image |
Sets the properties for a list |
CSS list-style-image Property
The list-style-image property replaces the list-item marker with an image.
Note: Always specify a "list-style-type" property in case the image is unavailable.
Inherited: Yes
Example
ol
{
list-style-image: url(blueball.gif);
list-style-type: circle
} |
Possible Values
Value |
Description |
url |
The path to the image |
none |
No image will be displayed |
CSS list-style-position Property
The list-style-position property places the list-item marker in the list.
Inherited: Yes
Example
ol
{
list-style-position: inside
} |
Possible Values
Value |
Description |
inside |
Indents the marker and the text. |
outside |
Keeps the marker to the left of the text |
CSS list-style-type Property
The list-style-type sets the type of the list-item marker.
Note: Some browsers only support the "disc" value.
Inherited: Yes
Example
ul
{
list-style-type: disc
} |
Possible Values
Value |
Description |
none |
No marker |
disc |
The marker is a filled circle |
circle |
The marker is a circle |
square |
The marker is a square |
decimal |
The marker is a number |
decimal-leading-zero |
The marker is a number padded by initial zeros (01, 02, 03, etc.) |
lower-roman |
The marker is lower-roman (i, ii, iii, iv, v, etc.) |
upper-roman |
The marker is upper-roman (I, II, III, IV, V, etc.) |
lower-alpha |
The marker is lower-alpha (a, b, c, d, e, etc.) |
upper-alpha |
The marker is upper-alpha (A, B, C, D, E, etc.) |
lower-greek |
The marker is lower-greek (alpha, beta, gamma, etc.) |
lower-latin |
The marker is lower-latin (a, b, c, d, e, etc.) |
upper-latin |
The marker is upper-latin (A, B, C, D, E, etc.) |
hebrew |
The marker is traditional Hebrew numbering |
armenian |
The marker is traditional Armenian numbering |
georgian |
The marker is traditional Georgian numbering (an, ban, gan, etc.) |
cjk-ideographic |
The marker is plain ideographic numbers |
hiragana |
The marker is: a, i, u, e, o, ka, ki, etc. |
katakana |
The marker is: A, I, U, E, O, KA, KI, etc. |
hiragana-iroha |
The marker is: i, ro, ha, ni, ho, he, to, etc. |
katakana-iroha |
The marker is: I, RO, HA, NI, HO, HE, TO, etc. |
|
