How to Make an Image Bullet List in CSS

Sometimes it only takes a tiny bit of novelty to make one Web page stand out from the rest. As a site developer, you can experiment with bold color combinations, try exotic new fonts or simply make subtle changes to an HTML list element. Unordered lists -- defined using the ul HTML tag -- display standard round bullets by default. You don't have to use those bullets for your lists. Create a one-line CSS class containing a "list-style-image" attribute and you can convert any list's bullets to an image of your choice.

Instructions

1. Open your HTML editor and paste this code into the head section of one of your HTML documents:

   <style type="text/css">
   .imageBullet { list-style-image: url(IMAGE_NAME); }
   </style>

   This code creates the CSS class that sets the value for list-style-image to the name specified in the url attribute. Replace "IMAGE_NAME" with the URL of an image on the Web.

2. Add the following code to the document's body section:

   <ul class="imageBullet">
   <li>Red</li>
   <li>Blue</li>
   <li>Green</li>
   </ul>

   This creates a simple list containing colors. Note that the tag references the imageBullet CSS class. Because it references that class, the list will set its bullets using the image defined in the CSS class.

3. Save the document and open it in a browser to see the image bullets that appear on the list.

Tips & Warnings

• Remember to use small images for your bullets. Small GIF images such as arrows make excellent bullets.

References

• W3Schools: CSS List-Style-Image Property

Resources

• HTML Dog: CSS Beginner Tutorial