Property Description

The list-style shorthand property sets all the list properties in one declaration.

The properties that can be set, are (in order): list-style-type, list-style-position, list-style-image.

If one of the values above are not specified, the default value for the missing property will be inserted.

Property Values

Value	Description
list-style-type	Specifies the type of list-item marker. See list-style-type for possible values
list-style-position	Specifies where to place the list-item marker. See list-style-position for possible values
list-style-image	Specifies the type of list-item marker. See list-style-image for possible values
initial	Specifies that the value of the property should be set to the default value
inherit	Specifies that the value of the property should be inherited from the parent element

Examples

This example specifies all of the list properties in one declaration.

ul {
  list-style: square inside url("/images/3dball.gif");
}

Browser Support

Chrome	Firefox	IE	Safari	Opera
1.0	1.0	4.0	1.0	7.0

Miscellaneous Information

Inherited:	Yes
Defined In:	CSS1
Default Value:	disc outside none

Property Description

The list-style-image property replaces the marker with an image.

This property has the following syntax:

list-style-image: none|url|initial|inherit;

Property Values

Value	Description
none	(default) No image will be displayed, but thelist-style-type property will define what type of marker will be displayed
url	The path to the image to be used as a marker
initial	Specifies that the value of the property should be set to the default value
inherit	Specifies that the value of the property should be inherited from the parent element

Examples

This example specifies an image as the list-item marker in a list.

ul {
  list-style-image: url("/images/3dball.gif");
  list-style-type: square;
}

Browser Support

Chrome	Firefox	IE	Safari	Opera
1.0	1.0	4.0	1.0	7.0

Miscellaneous Information

Inherited:	Yes
Defined In:	CSS1
Default Value:	none

Property Description

The list-style-position property specifies if the markers should appear inside or outside of the content flow.

This property has the following syntax:

list-style-position: inside|outside|initial|inherit;

Property Values

Value	Description
inside	Indents the marker and the text. Markers appear inside the content flow
outside	(default) Indents the marker. Markers appear outside the content flow
initial	Specifies that the value of the property should be set to the default value
inherit	Specifies that the value of the property should be inherited from the parent element

Examples

This example specifies that the list-item markers should appear inside the content flow (results in an extra indentation).

ul {
  list-style-position: inside;
}

This example shows the results of setting the various list-style-position values:

Browser Support

Chrome	Firefox	IE	Safari	Opera
1.0	1.0	4.0	1.0	3.5

Miscellaneous Information

Inherited:	Yes
Defined In:	CSS1
Default Value:	outside

Property Description

The list-style-type specifies the type of list-item marker in a list.

Property Values

Value	Description
armenian	The marker is traditional Armenian numbering
cjk-ideographic	The marker is plain ideographic numbers
circle	The marker is a circle
decimal	The marker is a number
decimal-leading-zero	The marker is a number padded by initial zeros (01, 02, 03, etc.)
disc	(default) The marker is a filled circle
georgian	The marker is traditional Georgian numbering (an, ban, gan, etc.)
hebrew	The marker is traditional Hebrew numbering
hiragana	The marker is traditional Hiragana numbering
hiragana-iroha	The marker is traditional Hiragana iroha numbering
katakana	The marker is traditional Katakana numbering
katakana-iroha	The marker is traditional Katakana iroha numbering
lower-alpha	The marker is lower-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.)
lower-roman	The marker is lower-roman (i, ii, iii, iv, v, etc.)
none	No marker
square	The marker is a square
upper-alpha	The marker is upper-alpha (A, B, C, D, E, etc.)
upper-latin	The marker is upper-latin (A, B, C, D, E, etc.)
upper-roman	The marker is upper-roman (I, II, III, IV, V, etc.)
initial	Specifies that the value of the property should be set to the default value
inherit	Specifies that the value of the property should be inherited from the parent element

Examples

This example specifies some different list styles.

ul.circle {
  list-style-type:circle
}

ul.square {
  list-style-type:square
}

This example shows the results of setting the various list-style-type values:

Browser Support

Chrome	Firefox	IE	Safari	Opera
1.0	1.0	4.0	1.0	3.5

¹ - Value not supported by IE

Note: IE9 and Opera 11 do not support: cjk-ideographic, hebrew, hiragana, hiragana-iroha, katakana, and katakana-iroha.

Note: IE8, and earlier, only support the property values: decimal-leading-zero, lower-greek, lower-latin, upper-latin, armenian, georgian, and inherit if a !DOCTYPE is specified

Miscellaneous Information

Inherited:	Yes
Defined In:	CSS1
Default Value:	"disc" for <ul>, "decimal" for <ol>