As we know, designers can never leave well enough alone.  The default css behavior is for bullets to be the same color as their associated list item <li>.  Although there are a number of solutions on the internet, this is the most simple, elegant, and universally compatible.

 Here is an example of what we’re looking to accomplish:

• Bullet-List Item 1
• Bullet-List Item 2
• Bullet-List Item 3
• Bullet-List Item 4
• Bullet-List Item 5

Note how the bullets are red and the list-item text is blue.  Now, let’s take a look at the code:

Standard code:

<ul id=”ex_list”>
      <li>Bullet-List Item 1</li>
      <li>Bullet-List Item 2</li>
      <li>Bullet-List Item 3</li>
      <li>Bullet-List Item 4</li>
      <li>Bullet-List Item 5</li>
</ul>

In order to style the bullets and text seperately, we must enclose the <li> text within <span> tags:

<ul id=”ex_list”>
      <li><span>Bullet-List Item 1</span></li>
      <li><span>Bullet-List Item 2</span></li>
      <li><span>Bullet-List Item 3</span></li>
      <li><span>Bullet-List Item 4</span></li>
      <li><span>Bullet-List Item 5</span></li>
</ul>

Now that we have the xhtml setup correctly, all we have to do is perform some minor CSS changes:

#ex_list li{
          color: blue;       /* The color you want the bullets to be */
}
#ex_list li span{
          color: red;      /* The color you want the bullets to be */
}