09-CSS List Properties

0
5

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>
  5.  
  6. &nbsp;
  7.  
  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
(Visited 9 times, 1 visits today)
SHARE
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!

LEAVE A REPLY

Please enter your comment!
Please enter your name here