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. ul.choco {<br />    list-style-type: circle;<br />}</p>
  2. <p>ul.candy {<br />    list-style-type: square;<br />}</p>
  3. <p>ol.lollipop {<br />    list-style-type: upper-roman;<br />}</p>
  4. <p>ol.last{<br />    list-style-type: lower-alpha;<br />}<br /></style>
  6. &nbsp;
  8. Example of unordered lists:
  9. <ul class="choco">
  10.     <li>Coffeecan</li>
  11.     <li>Dairymilk</li>
  12.     <li>Fivestar</li>
  13. </ul>
  14. <ul class="candy">
  15.     <li>Coffeecan</li>
  16.     <li>Dairymilk</li>
  17.     <li>Fivestar</li>
  18. </ul>
  19. Example of ordered lists:
  20. <ol class="lollipop">
  21.     <li>Coffeecan</li>
  22.     <li>Dairymilk</li>
  23.     <li>Fivestar</li>
  24. </ol>
  25. <ol class="last">
  26.     <li>Coffeecan</li>
  27.     <li>Dairymilk</li>
  28.     <li>Fivestar</li>
  29. </ol>
  30. &nbsp;
Facebook Comments
Previous article08-CSS Dimension Properties
Next article10-CSS Margin Properties
Hello Itsourcecoders, welcome to itsourcecode.com. I'm Joken Villanueva, MIT a passionate Blogger, Programmer and a Hobbyist. I started Itsourcecode because I wanted to give back and Share all the learnings and knowledge I've learned in my career and I believe through this website I would be able to help and assist those newbie programmers in enhancing their skills from different programming languages. So let us all help each other by sharing our ideas!


Please enter your comment!
Please enter your name here