List Type
You can set the list type of all <li> tags using the list-style-type property. Your possible values are: disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, and none.
For example, If I put this code between my </title> and </head> tag:
<style type="text/css">
<!--
li {
list-style-type: decimal;
}
-->
</style>
Then my list would look like this:
Using Images For Bullets
For this you would use the list-style-image property, with the value set to: url(address of image here).
Example:
li {
list-style-image: url(mybullet.gif);
}
With that set, all bullets will be the image of your choice.
Positions
With the list-style-position property, you can set the value to outside or inside, and affect how the text wraps around a bullet. Inside aligns subsequent lines of text with the bullet, outside aligns it with the first letter of the bulleted section.
For example, If I put this between my </title> and </head> tag:
<style type="text/css">
<!--
li {
list-style-position: inside;
}
-->
</style>
I could make this:
Putting It All Together
You could string all these properties together like this:
<style type="text/css">
<!--
li {
list-style-type: square;
list-style-image: url(mybullet.gif);
list-style-position: inside;
}
-->
</style>
But, you could save space by doing this instead:
<style type="text/css">
<!--
li {
list-style: url(mybullet.gif) square inside;
}
-->
</style>
Controlling The Width
The width property can be used in potentially any CSS selector, and that includes Lists.
<style type="text/css">
<!--
li {
width: 200px;
}
-->
</style>
Which will make this: