ITSourceCode.com

We Exist to Provide 100% Free Source Code and Tutorials

Custom Search

09-CSS List Properties

In HTML, there are two types of lists:

  • unordered lists (<ul>) – the list items are marked with bullets
  • ordered lists (<ol>) – the list items are marked with numbers or letters

The CSS list properties allow you to:

  • Set different and unique  list item markers for ordered lists
  • Set different list item markers for an  unordered lists in a given webpage.
  • Set an image as the list item marker
  • Add background colors to lists and list items in  a given webpage.

 

  1. <!DOCTYPE html>
  2. ul.choco {
  3.     list-style-type: circle;
  4. }
  5.  
  6. ul.candy {
  7.     list-style-type: square;
  8. }
  9.  
  10. ol.lollipop {
  11.     list-style-type: upper-roman;
  12. }
  13.  
  14. ol.last{
  15.     list-style-type: lower-alpha;
  16. }
  17. </head>
  18.  
  19. <p>Example of unordered lists:</p>
  20. <ul class="choco">
  21.   <li>Coffeecan</li>
  22.   <li>Dairymilk</li>
  23.   <li>Fivestar</li>
  24. </ul>
  25.  
  26. <ul class="candy">
  27.     <li>Coffeecan</li>
  28.   <li>Dairymilk</li>
  29.   <li>Fivestar</li>
  30.  
  31. </ul>
  32.  
  33. <p>Example of ordered lists:</p>
  34. <ol class="lollipop">
  35.     <li>Coffeecan</li>
  36.   <li>Dairymilk</li>
  37.   <li>Fivestar</li>
  38.  
  39. </ol>
  40.  
  41. <ol class="last">
  42.     <li>Coffeecan</li>
  43.   <li>Dairymilk</li>
  44.   <li>Fivestar</li>
  45.  
  46. </ol>
  47.  
  48. </body>
  49. </html>
Facebook Comments

Check Your Domain Ranking

Leave a Reply

Your email address will not be published. Required fields are marked *

ITSourceCode.com © 2016 Frontier Theme

Subscribe For Latest Updates

Signup for our newsletter and get notified when we publish new articles for free!