How to Customize lists using css

So the unordered list - ul, by default gives us the standard bullet. This can be easily switched out and replaced by any image you design in photoshop/illustrator.
Applying some styles to the font can really make your list stand out.

Heres an example:
All you do in your html code is give the div an id, and make sure that each li element has the hyperlink reference
<div id="contentPanel">
<ul>
<li><a href="#">1 »</a></li>
<li><a href="#">2 »</a></li>
<li><a href="#">3 »</a></li>
</ul>
</div>

The css is where we take care of things - the lines of note here are bolded: These 2 lines are what is required to indicate you are not using the standard bullet and will be replacing it with a custom image.

.contentPanel {
background-color:#ffffff;
padding:10px;
}

.contentPanel ul {
list-style-type: none;
padding-left:0px;
margin-left:5px;
margin-top:0;
}

.contentPanel li{
background:url(../images/ul-dot.jpg) left no-repeat;
background-position:0 10px;
padding-left:15px;
padding-top:5px;
}

.contentPanel li a{
text-decoration:none;
color:#395F97;
font-weight:bold;
}

.contentPanel li a:hover{
text-decoration:none;
}

The last 2 declarations just take care of the font for the links.

You can get creative for the image, for this one I just used a pencil in photoshop to draw an arrow-like shape.