Have you ever wanted to change the bullet color of an unordered list, or change the appearance of the numbers in an ordered list, without using images? I have, and it’s always been sitting in the back of my mind waiting for an answer. Today it dawned on me, and it was so simple that I smacked my forehead when I did it, and now I’ll save you the pain and anguish and show you how.

First lets start with our lists:

<ul>
<li>Here is our</li>
<li>Unordered List</li>
<li>WOW!</li>
</ul>


<ol>
<li>Here is our</li>
<li>Ordered List</li>
<li>COOL!</li>
</ol>

Now to get it to do what we want it to do we need to add some paragraph tags.

<ul>
<li><p>Here is our</p></li>
<li><p>Unordered List</p></li>
<li><p>WOW!</p></li>
</ul>

<ol>
<li><p>Here is our</p></li>
<li><p>Ordered List</p></li>
<li><p>COOL! </p></li>
</ol>

Finally, we need to style it and because I’m such a good designer, I’m going to make my bullets and numbers Green, and my text black.


ul{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:10px;
color:#00FF00;
}
ul p {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color: #000000;
margin:5px 0;
}
ol{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:24px;
color:#00FF00;
font-style:italic;
line-height:24px;
}
ol p {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-style:normal;
color: #000000;
margin:0;
}

WOW! That looks good, see my example, and it even works in IE!

How did I do it?

It’s really simple, I just added a paragraph tag to each list item and styled each one accordingly. Keep in mind, if you change something in the parent, the <ul> or <ol> you’ll need to change it in the child as well, unless you want it to be the same.

Popularity: 34% [?]