The list-style properties describe how list items (i.e. elements with a 'display' value of 'list-item') are formatted. The list-style properties can be set on any element, and it will inherit normally down the tree. However, they will only be have effect on elements with a 'display' value of 'list-item'. In HTML this is typically the case for the 'LI' element.
|
Value
|
disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none 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 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.) none : No marker Netscape 4.0, Internet Explorer 4.0 Notes in IE 4.0+:
Notes in Netscape 4.0+:
|
|---|---|
|
Initial
|
disc |
|
Applies to
|
elements with 'display' value 'list-item' |
|
Inherited
|
yes |
|
Percentage Values
|
N/A |
The list-style-type sets the type of the list-item marker.
Note: Some browsers only support the "disc" value.
This property is used to determine the appearance of the list-item marker if 'list-style-image' is 'none' or if the image pointed to by the URL cannot be displayed.
|
OL { list-style-type: decimal } /* 1 2 3 4 5 etc. */ |
|
Example: Source code: <ul> Output:
|
|
Example: Source code: <ol> Output:
|
|
Value
|
<url> | none url : the path to the image none : No image will be displayed Netscape 6.0, Internet Explorer 4.0 Notes in IE 4.0+:
|
|---|---|
|
Initial
|
none |
|
Applies to
|
elements with 'display' value 'list-item' |
|
Inherited
|
yes |
|
Percentage Values
|
N/A |
This property sets the image that will be used as the list-item marker. When the image is available it will replace the marker set with the 'list-style-type' marker.
|
UL { list-style-image: url(http://png.com/ellipse.png) } |
|
Example: Source code: <ul> Output:
|
|
Example: Source code: <ol> Output:
|
|
Value
|
inside | outside inside : Indents the marker and the text. outside : Keeps the marker and the text to the left Netscape 6.0, Internet Explorer 4.0 Notes in IE 4.0+:
|
|---|---|
|
Initial
|
outside |
|
Applies to
|
elements with 'display' value 'list-item' |
|
Inherited
|
yes |
|
Percentage Values
|
N/A |
The value of 'list-style-position' determines how the list-item marker is drawn with regard to the content.
|
ol { list-style-position: inside } |
|
Example: Source code: <ul style="list-style-position: inside"> Output:
|
|
Example: Source code: <ol style="list-style-position: inside"> Output:
|
|
Value
|
[disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none] || [inside | outside] || [<url> | none] 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 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.) inside : Indents the marker and the text. outside : Keeps the marker and the text to the left url : the path to the image none : No marker. No image will be displayed Netscape 6.0, Internet Explorer 4.0 Notes in IE 4.0+:
|
|---|---|
|
Initial
|
not defined for shorthand properties |
|
Applies to
|
elements with 'display' value 'list-item' |
|
Inherited
|
yes |
|
Percentage Values
|
N/A |
The 'list-style' property is a shorthand notation for setting the three properties 'list-style-type', 'list-style-image' and 'list-style-position' at the same place in the style sheet.
|
UL { list-style: upper-roman inside } |
Setting 'list-style' directly on 'LI' elements can have unexpected results. Consider:
|
<STYLE TYPE="text/css"> |
Since the specificity (as defined in the cascading order) is higher for the first rule in the style sheet in the example above, it will override the second rule on all 'LI' elements and only 'lower-alpha' list styles will be used. It is therefore recommended to set 'list-style' only on the list type elements:
|
OL.alpha { list-style: lower-alpha } |
In the above example, inheritance will transfer the 'list-style' values from 'OL' and 'UL' elements to 'LI' elements.
A URL value can be combined with any other value:
|
UL { list-style: url(http://png.com/ellipse.png) disc } |
In the example above, the 'disc' will be used when the image is unavailable.
|
Example: Source code: <style type="text/css"> Output:
|
|
Example: Source code: <ol style="list-style: inside url(image/arrow.gif)"> Output:
|