CSS Property - List Style
Value: [disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none] || [inside | outside] || [<url> | none]
Initial: not defined for shorthand properties
Applies to: elements with "display" value "list-item"
Inherited: yes
Percentage values: N/A
The CSS property "list-style" is a shortend version for setting the individual list properties in one string in a style sheet or as an inline style in a HTML document:
Example:
ul {list-style: upper-roman inside;}
ul ul {list-style: circle outside;}
li.square {list-style: square;}
Setting "list-style" directly on "LI" elements can have unexpected results. Consider:
Example:
CSS Code:
<style type="text/css">
ol.alpha li {list-style: lower-alpha;}
ul li {list-style: disc;}
</style>
HTML Code:
<body>
<ol class="alpha">
<li>level 1
<ul>
<li>level 2</li>
</ul>
</li>
</ol>
</body>
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:
Example:
ol.alpha {list-style: lower-alpha;}
ul {list-style: disc;}
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:
Example:
ul {
list-style: url("http://DOMAINNAME.com/IMAGENAME.png") disc;
}
In the example above, the "disc" will be used when the image is unavailable.