Style sheets : A newsthread: new formatting options
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.