Affordable Website Templates

Tip#5

Cascading Style sheets (CSS) Bullets

More Cascading Style Sheets, CSS Tricks: Using Custom Bullets in Unordered Lists

I have created some images that I want to use as bullets for my unordered lists. Is there any way to use these custom bullets and still preserve proper structural markup in my HTML?

Good question. The answer is: you bet! To demonstrate, we'll look at what CancerNet has done.

The CancerNet designers created cascading style sheets with custom bullets for different levels in the hierarchy of their lists:

A small red square.

width="4" height="10" border="0"> A smaller black dot.

They loaded these two image files onto their server and added the following lines to their cascading style sheet:

LI { list-style-image: url(images/redsqr2_bullet.gif);
list-style-position: outside;
list-style-type: disc; color: #000000 }

UL LI { list-style-image: url(images/redsqr2_bullet.gif);
list-style-position: outside;
list-style-type: disc; color: #000000 }

UL LI LI { list-style-image: url(images/blkrnd_bullet.gif);
list-style-position: outside;
list-style-type: disc; color: #000000 }

UL LI LI LI { list-style-image: url(images/blkrnd_bullet.gif);
list-style-position: outside;
list-style-type: disc; color: #000000 }

Explanation of Terms

list-style-image: url(images/redsqr2_bullet.gif)
Tells the browser where the custom bullet image is located on the server.

list-style-position: outside
Tells the browser that all list text should be indented, rather than wrapping under the bullet. The default is "outside," so this line is not really necessary. [More info on list-style-position.]

list-style-type: disc; color: #000000
A fallback for older browsers that don't support CSS2. This line tells those browsers to use a solid black disc for bullets.

UL LI LI (etc.)
Here the web author is getting sophisticated and taking advantage of CSS2's ability to assign different images to different levels in nested lists. These lines tell the browser that primary list items should have red square bullets, while nested sub-lists should have small black bullets.

Example HTML

<ul>
<li>List item with red bullet.</li>
<li>Another list item with red bullet

<ul>
<li>Begin nested list: this item has a small black bullet.</li>
<li>Second item in nested list, with small black bullet.</li>
</ul>

</li>
<li>Back to the primary list items, with red bullets.</li>
</ul>

Results:

Caveat

As always, you should test your pages on multiple browsers and platforms before launching them publicly. Sometimes (especially if your cascading style sheets with custom bullets are large) you will need to do some tweaking to make sure the bullets line up properly with the list items.