Different Colour Bullet Lists

This article covers how to change the colour of the bullets in an HTML bullet point list. It is a follow up article to "Fun with Bullet Lists" which covered how to change the appearance of HTML bullet lists.

In this article colours are set using in-line styles, but it is recommended that should you want to change the colour styleing of your bullet lists that you consider external style sheets in order to ensure consistency across pages.

As a starting point, the following is a simple HTML bullet list, with no styling applied:

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

Perhaps the simplest way to change the colour is to apply the colour to the <ul> thus:

<ul style="color:#ff00ff">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

As you can see, this changes the colour of the bullets AND the colour of the text. If you wish to keep the text the original colour then you have to set the colour back again, for example:

<ul style="color:#ff00ff">
  <li><span style="color:#000000">One</span></li>
  <li><span style="color:#000000">Two</span></li>
  <li><span style="color:#000000">Three</span></li>
</ul>

This assumes of course that the normal text colour is black.

Where the in-line style to be applied to the <li> tag then this would change the colour of the bullet (and the text). The colour of the text can only be changed independently of the bullet colour by applying the style to the text and not the <li>, in this example it is done by introducing a span.

This does open possibilities for having different coloured bullets and different colour text, for example:

<ul>
  <li style="color:#ff0000"><span style="color:#8080ff">One</span></li>
  <li style="color:#00ff00"><span style="color:#ff8080">Two</span></li>
  <li style="color:#0000ff"><span style="color:#80ff80">Three</span></li>
</ul>

In each of these examples I have used colour codes (e.g. "#ff0000") instead of colour names (e.g. "red"), but this simply my preferred way of doing things. If you would prefer to use colour names then you can find a comprehensive list of the available colour names here: www.cryer.co.uk/resources/javascript/html2.htm.

An alternative approach would be to use images in place of the default bullets (which is one of the techniques covered in theoriginal article www.cryer.co.uk/resources/javascript/html5_fun_with_bullets.htm), but that would be less workable in some instances for example for an html email newsletter.