Style sheets : A newsthread: new formatting options
Contents ]
Dr Benton

Master your bullets!

Style sheets also permit us to format bulleted lists. If you find the default aspect of bulleted lists boring, you are like us. So why not try to change them by using your own GIF images?

Examine the following list:

  • Create your first style sheet
  • One style sheet for all your pages
Do you really think that we have repeatedly used the <IMG SRC> tags?

Not at all! We have defined the following CSS rule:

.liste {
  list-style-type: circle;
  list-style-image:url(dot.gif);
}

The second line of this definition indicates the image file to be used as a bullet. If it is not available, it is replaced by the bullet set with the list-style-type property.

HTML bullets. Instead of the circle value, try disc, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha or even none to ascertain the various bullet styles that are available by default in HTML.

Once the appropriate style rule has been defined, you can implement your advanced bulleted lists in the same way as the regular ones:

<UL class="liste">
<LI>Firstly
<LI>Secondly
<LI>Thirdly
</UL>

In the next workshop, we will add a few layers and a few lines of JavaScript, and then we will obtain our final home page menu.




  1   2   3   4