Fancy Bullet Lists

Many people, this author included, have tried to get around the fact that HTML bullet lists are plain and undecorative. Web authors like to have fancy, colored balls or other shapes as the item markers instead of just plain black dots.

Using CSS To Alter Bullet Color

If you just want the dots to be a different color, one way to do this is by using cascading style sheets. For example, these chunks of CSS code define lists with yellow, green, and blue dots:

UL.YELLOW {
	list-style-type: disc;
	color: yellow;
}

UL.GREEN {
	list-style-type: disc;
	color: green;
}

UL.BLUE {
	list-style-type: disc;
	color: blue;
}

Then, in the HTML file, a list construct like this is used:

<UL CLASS="BLUE">
<LI><DIV STYLE="color: black;">Item one</DIV></LI>
<LI><DIV STYLE="color: black;">Item two</DIV></LI>
    <UL CLASS="GREEN">
    <LI><DIV STYLE="color: black;">Item two-one</DIV></LI>
    <LI><DIV STYLE="color: black;">Item two-two</DIV></LI>
    </UL>
<LI><DIV STYLE="color: black;">Item three</DIV></LI>
</UL>

Which yields:

• Item one
• Item two
  • Item two-one
  • Item two-two
• Item three

Using CSS To Use Images for Bullets

We will use a very similar approach to the above, only this time we will define these CSS elements:

UL.YELLOWBALL {
	list-style: url(http://www.eng.buffalo.edu/icons/yellowball.gif) disc;
	color: yellow;
}

UL.GREENBALL {
	list-style: url(http://www.eng.buffalo.edu/icons/greenball.gif) disc;
	color: green;
}

UL.BLUEBALL {
	list-style: url(http://www.eng.buffalo.edu/icons/blueball.gif) disc;
	color: blue;
}

Then, we will use them in our HTML code like this (again, very similar to the previous example):

<UL CLASS="BLUEBALL">
<LI><DIV STYLE="color: black;">Item one</DIV></LI>
<LI><DIV STYLE="color: black;">Item two</DIV></LI>
    <UL CLASS="GREENBALL">
    <LI><DIV STYLE="color: black;">Item two-one</DIV></LI>
    <LI><DIV STYLE="color: black;">Item two-two</DIV></LI>
    </UL>
<LI><DIV STYLE="color: black;">Item three</DIV></LI>
</UL>

Which yields:

• Item one
• Item two
  • Item two-one
  • Item two-two
• Item three

Again, the <DIV> element is necessary so that the text after the bullet mark doesn't show up in the color of the bullet mark.

Note that there appears to be a bug in the Mozilla browser: If the image is not available, the "disc" type is supposed to be used. This works fine in Internet Explorer, but in Mozilla no list marker appears.

Free Bullet Marker Images

Finally, for a good collection of free images, many of which can be used as bullet markers, click here (click "browse" in the Search box, and browse for "Web Bullets").