Using CSS for custom bullet points

A short guide on using CSS to style lists and custom bullet points for your website.

Having recently discovered the excellent selection of free bullet images at Stylegala's Bullet Madness, it reminded me that custom bullet points on your lists can be a stylish addition to your website design if used correctly.

Apply CSS to your lists

With CSS you can quickly modify the bullets used on your lists. Using the list-style property you can change the default selection of the bullet point.

Produces

• list item 1
  • sub list 1
  • sub list 2
• list item 2

Custom images for bullets

You can also use images instead of the standard bullet point symbols.

Produces

• list item 1
  • sub list 1
  • sub list 2
• list item 2

If you want more control over how the lists are displayed then you can remove the list-style and use background images and padding to position your bullets and content.

Produces

• list item 1
  • sub list 1
  • sub list 2
• list item 2

These simple examples show how you can quickly change the way your lists look with minimal changes to your CSS.

Lists are also great used in combination with CSS to produce website navigation menus as this article over at A List Apart demonstrates.