CSS List Properties

List property sets different items of the list either in an ordered list(<ol>) or unordered list <ul>.

Various list properties are:
  • list-style-type: It can be any shape like circle, square, upper-roman, lower-alpha.
  • list-style-position: It specifies whether the list items appear inside or outside the content flow.
  • list-style: It allows all the list style property into a single expression.
  • list-style-image: It allows to specify an image it can use as our own bullet style.

Example: Demonstration of link property

<html>
     <head>
          <style>
               ul.a {list-style-position:outside;list-style-type:circle;}
               ul.b {list-style-position:inside;list-style-type:square;}
               ol.c {list-style-position:outside;list-style-type:decimal;}
               ol.d {list-style-position:inside;list-style-type:lower-alpha;}
               ol.e{list-style: upper-roman outside;}
          </style>   
     </head>
     <body>
          <p>Example of various list properties</p>
          <ul class="a">
               <li>Chemistry</li>
               <li>computer Science</li>
               <li>Physics</li>
          </ul>
               <ul class="b">
               <li>Tea</li>
               <li>Coffee</li>
               <li>Cold drink</li>
          </ul>
          <ol class="c">
               <li>Chemistry</li>
               <li>computer Science</li>
               <li>Physics</li>
          </ol>
          <ol class="d">
               <li>Tea</li>
               <li>Coffee</li>
               <li>Cold drink</li>
          </ol>
          <ol class="e">
               <li>Chemistry</li>
               <li>computer Science</li>
               <li>Physics</li>
          </ol>
     </body>
</html>


Output:
list property
▲