CSS Lists

CSS can be used to customize the style of list elements.

list-style-type

CSS property list-style-type is used to specify the type of list-item marker. Default value is "disc".

Properties

Some of the types that can be used for list element styling are as follows:

  • list-style-type: circle;
  • list-style-type: square;
  • list-style-type: upper-roman;
  • list-style-type: lower-alpha;
Example:
<!doctype html>  
<html>

    <head>
        <title>...</title>
        <style> 
            ul.circle {
                list-style-type: circle;
            }
        </style> 
    </head>
  
    <body>
        <p>PHPDocs provides the tutorials of following languages.</p>

        <ul class="circle">
          <li>HTML</li>
          <li>CSS</li>
          <li>PHP</li>
        </ul>
    </body>

</html>

list-style-position

CSS property list-style-position is used to specify where to place the list-item marker. Default value is "outside"

Properties

Some of the positions that can be used for list element styling are as follows:

  • list-style-position: circle;
  • list-style-position: square;
Example:
<!doctype html>  
<html>

    <head>
        <title>...</title>
        <style> 
            ul.inside {
                list-style-position: inside;
            }
        </style> 
    </head>
  
    <body>
        <p>PHPDocs provides the tutorials of following languages.</p>

        <ul class="inside">
          <li>HTML</li>
          <li>CSS</li>
          <li>PHP</li>
        </ul>
    </body>

</html>

list-style-image

CSS property list-style-type is used to replace the list-item marker with an image.

Example:
<!doctype html>  
<html>

    <head>
        <title>...</title>
        <style> 
            ul {
                list-style-image: url('sqpurple.gif');
            }
        </style> 
    </head>
  
    <body>
        <p>PHPDocs provides the tutorials of following languages.</p>

        <ul>
          <li>HTML</li>
          <li>CSS</li>
          <li>PHP</li>
        </ul>
    </body>

</html>