CSS offer to web designers a lot of powerful properties relating to html lists. I’ll explain in this tutorial how you can create beautiful stylish lists by using CSS.
Unfortunately, different browsers support in different ways same css code. When you customize your lists, it’s recommended to verify how your code works for the most widely browsers.
List properties
list-style-position: sets the position of the marker in the list and it can takes tha values outside (the default value, keeps the list as in simple html) and inside (that intends the text and the marker).
list-style-type: sets the type of the bullets or markers of the list. The values that can be taken are: none, disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-alpha, upper-alpha, lower-greek, lower-latin, upper-latin, hebrew,armenian, georgian, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha.
list-style-image: this property sets an image as a bullet or marker for the items of the list. It can take as value an url (a relative or absolute to the image to be displayed) or none (that is the default value and means that no image will be displayed).
list-style: this property it is used to declare the whole above variables in one statemenet, like in the picture below:
Example:
Now I’ll just show to you a simple example about how to implement the list properties we discuss above.
1. Create a .css file and save it as style.css on your computer. In the same folder with style.css assure yourself that you have an image named bulet.gif or take mine: 
. Put in the following code:
ul{
list-style-position:inside;
list-style-image: url(bulet.gif);
} ol{
list-style-position:outside;
list-style-type:upper-roman;
}
2. Now create a .html file and save it as list.html in the same folder with style.css. Put in the HTML code below:
<html>
<head>
<link href="style.css" mce_href="style.css" rel="stylesheet" type="text/css" />
</head><body>
<b>Bulleted List:</b>
<ul>
<li>CSS tutorials</li>
<li>Flash tutorials</li>
<li>Javascript tutorials</li>
</ul>
<b>Numbered List:</b>
<ol>
<li>CSS tutorials</li>
<li>Flash tutorials</li>
<li>Javascript tutorials</li>
</ol>
</body>
</html>
3. Your result should look like below:
Entries (RSS)
January 12th, 2008 at 9:20 pm
Talented citizens will find this info on Flash Blog » Customize your CSS lists where many guests already have typed that the exclusive info is fascinating! Thanks for the help you gave.
April 6th, 2008 at 9:52 am
I’m supporting this idea all the way! I can not imagine who would disagree with it. On the whole - make posts like this more often.