Westciv Logo

These materials are copyright Western Civilisation Pty Ltd.

www.westciv.com

They are brought to you courtesy of Style Master CSS Editor and Westciv's standards based web development courses.

Please see our website for detailed copyright information or contact us info@westciv.com.

quick tutorials

Customised bullets

Often, even with the very largest websites, you'll find bulleted lists with gif images as the bullets. Unfortunately, with HTML alone (ie, without CSS) you can't create real lists with your own gif bullets. You'll find that these lists invariably aren't HTML unordered lists <UL>s at all.

Note that this is a perfectly valid style sheets feature, but that Netscape Navigator 4 and 4.5 for Mac and windows does not support gifs for bullet points. It will simply show a standard bullet.

With style sheets we can make real lists, with their own bullets. You can even create different gif bullets for different levels of list.

In our HTML

In the HTML we need only create a list. Let's make it two levels deep to illustrate how to have different bullets for different levels.

<ul>

<li>this is the first list item

<ul>

<li>this is the first item in the second level

</ul>

<li>this is the second list item at the first level

</ul>

In our style sheet

In our style sheet we need to take care of two cases. First is the top level list item. Then we need to worry about the second level list item.

Firstly, let's worry about how we select these two kinds of list item, then about how to specify an image for their bullet points.

The top level item is simple. We just want to select list items, which is just like selecting paragraphs and headings of level 1. Namely

li

Selecting second level list items is like selecting links inside paragraphs of a certain class, which we saw in our section on navigation bars. I this case, we want List items that are inside unordered lists <UL>s, which themselves are inside unordered lists. That is

ul ul li

Now we need to specify the url for the image. Here, we use the list-style-image property, and give it a url as we have seen already for the background-image property. For example

{list-style-image: url(../gifs/l1bullet.gif)}

Style Master CSS Editor

Web Directions Conference