Jessett.com home  

css

getting started
css style properties
browser support
css classes
borders
link styles
images as bullet points
first letter/line pseudo element
custom scroll bars
css and dreamweaver

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