home > css > images as bullet points

images as bullet points

Use the text below in your style sheet definitions to make your own graphics appear as the "bullet" on unordered lists and nested unordered lists. You will need to create small graphics and save them in your graphics folder in your web site and reference the correct location of these in the url(/graphics/bullet.gif) part of the definition. Interesting effects can be achieved with trial and error.

n.b. These only show in versions of Internet Explorer, Netscape 6.x and Opera 5+. Earlier versions of Netscape simply show the browser default for bullets.

UL {
font-size : 10pt;
font-family : "Trebuchet MS", arial, helvetica, sans-serif;
color : #003366;
list-style-image: url(/graphics/bullet.gif);
}

UL UL LI {
font-size : 10pt;
font-family : "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color : #003366;
list-style-image: url(/graphics/sub_bullet.gif);
}

UL UL UL LI {
font-size : 10pt;
font-family : "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color : #003366;
list-style-image: url(/graphics/sub_sub_bullet.gif);
}

The above definitions make bullet points appear on this web site as follows:

• First bullet
  • Nested bullet
    • Second nested bullet