CSS - Changing the list-style of HTML Lists
Description
list-style is a short-hand command to change 3 properties or styles of HTML lists.
Specifically the <li> tags.
list-style:
list-style-type
list-style-position
list-style-image;
See also: list-style-type, list-style-image, list-style-position.
Examples for list-style
Example 1:
<style>
#test { list-style: square outside none; }
</style>
<ul id="test">
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
Example 2:
<style>
#test2 { list-style: inside url(images/bullet.gif); }
</style>
<ul id="test2">
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
Example 3:
<style>
#test3 { list-style: outside url(images/bullet.gif); }
</style>
<ul id="test3">
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
Values for list-style
| list-style-type |
disc
circle
square
decimal
lower-roman
upper-roman
lower-alpha
upper-alpha
none |
Specifies the bullet style. Default is disc. If url is specified then this property is disregarded. |
| list-style-position |
inside
outside |
Specifies the positioning of the bullet. Inside for Default is outside. |
| list-style-image |
url(URL)
none |
Specifies a url of an image to use as the bullet. Default is none. |