Styling Links

  1. unordered lists - the list items are marked with bullets
  2. ordered lists - the list items are marked with numbers or letters
Links can be styled with any CSS property (e.g. color, font-family, background, etc.). Special for links are that they can be styled differently depending on what state they are in. The four links states are:
  * a:link - a normal, unvisited link
    * a:visited - a link the user has visited
    * a:hover - a link when the user mouses over it
    * a:active - a link the moment it is clicked



<!DOCTYPE html> <html> <head> <style> ul.a {list-style-type:circle;} ul.b {list-style-type:square;} ol.c {list-style-type:upper-roman;} ol.d {list-style-type:lower-alpha;} </style> </head> <body> <p>Example of unordered lists:</p> <ul class="a"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> <ul class="b"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> <p>Example of ordered lists:</p> <ol class="c"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="d"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol> </body> </html>



To specify an image as the list item marker, use the list-style-image property:

Example 2

<!DOCTYPE html> <html> <head> <style> ul { list-style-image:url('sqpurple.gif'); } </style> </head> <body> <ul> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> </body> </html>

All Tutorial => 12345678910

Write Comment