Using images to create a fancy CSS bullets list

Before Cascading Style Sheets became available when you added a bullet list onto your web page you had to be satisfied with of choice of:- circle, square, disc. Now by using CSS you can have your own custom list by specifying an image you would like to use and it is very easy, once you have an image that is.

You image should not be over 15x15 pixels in size and part of this can have a transparent value, I created the two images used in my examples by using the Wingdings Fonts in my graphics package rather than try and create one myself, you may like to try that also.

Envelope Bullet   Letter   Head Bullet   Green Scissors   Red Circle   House   Blue Circle   Phone   Tick mark

 

The possibilities are endless and only left to your imagination. Just follow the simple Steps shown below and you will be up and running in no time at all.

This is the CSS Class that you will need

First you will need to decide how your new bulleted list is going to look, below is a basic of code in which we will use a image of a pair of Scissors, look at the line list-style-image: url(bullets/scissor.png);

Step. One

 

<style type="text/css">
ul.scissors {
font-size: 12px;
color: #400080;
padding-right: 12px;
list-style-image: url(bullets/scissor.png);
list-style-position: outside;
}
</style>

Now we need the actual code adding to the page to display our CSS Bulleted List, it is listed below.

Step. Two

 

<ul class="scissors">
<li> Place your text here.</li>
</ul>

 

  • This is a bullet list created by using the two pieces of code above. You will notice we have a pair of scissors to the left of the text and the text is purple in colour.
  • You can adjust the placement of the image by changing padding-right value and also by adding a padding-top value if you wish.
Why stop there.
  • This is a bullet list created by using the two pieces of code above. You will notice we now have a telephone to the left of the text and the text is green in colour.
  • You can adjust the placement of the image by changing padding-right value and also by adding a padding-top value if you wish.

The above was achieved just by changing a couple of values in Step One.

ul.scissors was changed to ul.phone
bullets/scissor.png was changed to bullets/phone.png
And the color value was change to Green.

All the above examples are only the basic form and will be more than adequate for the majority of web page builders, once you have mastered this section you can go to the next advanced level