HTML5 and CSS3 All-in-One For Dummies
Book image
Explore Book Buy On Amazon

It's not quite a background, but you can also use images for list items for your HTML5 and CSS3 web page. Sometimes, you might want some type of special bullet for your lists.


On this page, several varieties of peppers have been listed. For this kind of list, a custom pepper bullet is just the thing. Of course, CSS is the answer:


My Favorite Peppers

  • Green
  • Habenero
  • Arrivivi Gusano

The list-style-image attribute allows you to attach an image to a list item. To create custom bullets:

  1. Begin with a custom image.

    Bullet images should be small, so you may have to make something little. The image will be trimmed to an appropriate width, but it will have all the height of the original image, so make it small.

  2. Specify the list-style-image with a url attribute.

    You can set the image as the list-style-image, and all the bullets will be replaced with that image.

  3. Test the list in your browser.

    Be sure everything is working correctly. Check to see that the browser can find the image, that the size is right, and that everything looks like you expect.

If you don't want to use an image, CSS has a number of other styles you can apply to your list items. Use the list-style-type rule to set your list to one of many styles. Look at official CSS documentation for a complete list, but the most commonly used style types are disc, circle, square, decimal, upper-roman, lower-roman, upper-latin, and lower-latin.

Note that you can apply a numeric styling to a list item in an ordered or unordered list, so the distinction between these list types is less important than it used to be.

About This Article

This article is from the book:

About the book author:

Andy Harris taught himself programming because it was fun. Today he teaches computer science, game development, and web programming at the university level; is a technology consultant for the state of Indiana; has helped people with disabilities to form their own web development companies; and works with families who wish to teach computing at home.

This article can be found in the category: