|
Back
Using Bullets With CSS (Cascading Style Sheets)
Would you like to use custom bullets in your HTML lists? It's not possible with old HTML tags, but with Cascading Style Sheets, it's very easy.
Probably the most common question people ask when learning how to build these lists is, "Can I use a GIF to make custom bullets?" Using CSS, you can define a custom bullet using code like this:
This will produce a bulleted list using the image you have chosen. This technique uses the CSS property "list-style-image," which defines the URL where our GIF image is located.
Unfortunately, as with a lot of things under CSS, the syntax for defining the image's location is a little different from what you're probably used to. Instead of placing the image URL inside quote marks, you have to place the URL inside a set of parentheses. Other than that, the rules for defining the URL are the same as those used in the A HREF and IMG tags.
This technique works only under version 4 and 5 of Microsoft Internet Explorer, and under version 3 of Opera. The effect degrades gracefully, so browsers that don't understand this style sheet property just display the standard list bullet.
That's a key point to keep in mind with style sheets. Since not all browsers support the full CSS specification, it's important to check your page using a browser that doesn't understand CSS properties.
Back
|