HTML Techniques-12
4.1 Use style sheets to change
list bullets
To change the "bullet" style of unordered list items created with the LI element, use style sheets. In CSS, it is possible to
specify a fallback bullet style (e.g., 'disc') if a bullet image cannot be
loaded.
Example.
<HEAD>
<TITLE>Using style sheets to change bullets</TITLE>
<STYLE type="text/css">
UL { list-style: url(star.gif) disc }
</STYLE>
</HEAD>
<BODY>
<UL>
<LI>Audrey
<LI>Laurie
<LI>Alice
</UL>
End example.
To further ensure that users understand differences between list items
indicated visually, content developers should provide a text label before or
after the list item phrase:
Example.
In this example, new information is communicated through text ("New"), font
style (bold), and color (yellow bullet, red text on yellow background).
In this example, new information is communicated through text ("New"), font
style (bold), and color (yellow bullet, red text on yellow background).
<HEAD>
<TITLE>Bullet styles example</TITLE>
<STYLE type="text/css">
.newtxt { font-weight: bold;
color: red;
background-color: yellow }
.newbullet { list-style : url(yellow.gif) disc }
</STYLE>
</HEAD>
<BODY>
<UL>
<LI class="newbullet">Roth IRA <SPAN class="newtext">New</SPAN></LI>
<LI> 401(k)</LI>
</UL>
</BODY>
End example.
