Others


Others


List Properties - CSS


CSS List properties are used to define the list item marker.

Property Description Values Example
list-style-type Specifies the shape of list-item marker. none, disc, circle, square, decimal, lower-alpha, upper-alpha, upper-roman, lower-roman 
ul{
  list-style-type:lower-alpha;
}
list-style-position Specifies the position of list-item marker. inside, outside, inherit 
ul{
  list-style-position:outside;
}
list-style-image Specifies an image as the list item marker. URL, none, inherit 
ul{
  list-style-image:url(test.png);
}
list-style Sets all the list properties for a list. list-style-type, list-style-position, list-style-image, inherit 
ul{
  list-style: decimal inside;
}
1.list-style-type 
<html>
  <head>
    <style>
      ul{
        list-style-type:lower-alpha;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
    </ul>
  </body>
</html>
Try it Yourself
  • Item 1
  • Item 2
  • Item 3
  • Item 4
2.list-style-position 
<html>
  <head>
    <style>
      .cls1{
	background-color:#7983f2;
        list-style-position:inside;
      }
      .cls2{
	background-color:#7983f2;
        list-style-position:outside;
      }
    </style>
  </head>
  <body>
    <h3>Inside List</h3>
    <ul class='cls1'>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
    </ul>

    <h3>Outside List</h3>
    <ul class='cls2'>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
    </ul>
  </body>
</html>
Try it Yourself

Inside List

  • Item 1
  • Item 2
  • Item 3
  • Item 4

Outside List

  • Item 1
  • Item 2
  • Item 3
  • Item 4
3.list-style-image 
<html>
  <head>
    <style>
      ul{
        list-style-image:url(star.png);
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
    </ul>
  </body>
</html>
Try it Yourself