in the name of allah
  ArabTut
main tutorials downloads forums links contact us  
   
 
 
Arabtut>tutorials>CSS tutorials
making a custom bullets

Bullets are the the little dots that you see when you make a list of stuff using the <ul> tag like the sample below

  • first
  • second
  • third

to change these bullets, simply put this code in your CSS file

li.bullet {
list-style-image:url(/images/arrow.gif)
}

in this code we have li.newbullet which is the style sheet rule and /images/arrow.gif is the location of the image - you must change it

next, we need to apply the CSS rule to each bullet

<ul>
<li class="bullet">first</li>
<li class="bullet">second</li>
<li class="bullet">third</li>
</ul>

That is it. Now test the page and you will find that the bullets have changed to the picture we choose.

 
     
All Copyrights Reserved Arabtut© 2006