HTML lists can be styled with great detail, but we will cover a couple of these properties. This can become extremely complicated if you are attempting have very specific customizations to lists inside lists, which we will not be dealing with in this tutorial. Lists can be customized even more than standard paragraph.

CSS Common List Properties

• list-style-type – sets the bullet style (roman numerals, numbers, circles, etc)
• list-style-image – set a custom bullet style using an image

We will be using the first property with an ordered list and the other property with an unordered list.

Example

<style type="text/css">
ol.special{list-style-type:upper-roman;}
ul.special{list-style-image:url(/images/smiley4.gif);}
</style>

<ol class="special">
<li> test1 </li> 
<li> test2 </li>
</ol>
<ul class="special">
<li> test1 </li> 
<li> test2 </li>
</ul>

Result

We assigned both lists to a class called special this time so that I wouldn't destroy my category lists on your left. Let's discuss our ordered list first (ol). We changed the list-style-type property to a value of "upper-roman" that gives us the awesome incremental roman numeral effect in the first list.

In the second list, the unordered list (ul), we discover the super fantastic list-style-image property. Obviously, if we are setting an image and not a form of order, this is essentially useless in an ordered list. We create a CSS url reference, url(") where we put our link inside the single quotations. In my case, I have a crazy smiley face to brighten the day.

Other Usable CSS Properties for lists

As I mentioned above, lists have more styling options than a paragraph. This means they can use everything that paragraphs can. The most common adjust I make to lists, is the to the margin and padding properties. Feel free to tinker with all kinds of properties; don't limit yourself.