CSS List

    In HTML we have two tags <ul> and <ol> to represent text content in list. The list comes very useful when we want to show data in numbered and bullets points. In this tutorial, we will be discussing how to use the CSS properties to manipulate or control the type, position, and style of an HTML list. Here are some significant list properties which we will be covering in this tutorial.

    Properties: Description:
    list-style-type It controls the appearance of the list marker.
    list-style-position If the list text is too long then it specifies whether to align the second line with the first line or start it with the marker.
    list-style-image It set image as a marker instead of numbered or bullets points.
    list-style It is a shorthand for all the above properties

    CSS list-style-type Property

    The list-style-type property determines the appearance of the list bullets and number points. The values vary for an ordered list and unordered list elements. list-style-type property values for Unordered List :

    • none for no bullets.
    • disc for filled circle bullets.
    • circle for empty circle.
    • square for square bullets.

    list-style-type property values for Ordered list:

    Value Example
    decimal 1,2,3,4,5
    decimal-leading-zero 01, 02, 03, 04, 05
    lower-alpha a, b, c, d, e
    upper-alpha A, B, C, D, E
    lower-roman i, ii, iii, iv, v
    upper-roman I, II, III, IV, V

    Example

    <html>
       <head>
       </head>
       <body>
    
          <ul style = "list-style-type:circle;">
             <li>HTML</li>
             <li>CSS</li>
             <li>JavaScript</li>
          </ul>
         
          <ul style = "list-style-type:square;">
             <li>HTML</li>
             <li>CSS</li>
             <li>JavaScript</li>
          </ul>
         
          <ol style = "list-style-type:decimal;">
             <li>HTML</li>
             <li>CSS</li>
             <li>JavaScript</li>
          </ol>
    
          <ol style = "list-style-type:lower-alpha;">
             <li>HTML</li>
             <li>CSS</li>
             <li>JavaScript</li>
          </ol>
         
          <ol style = "list-style-type:lower-roman;">
             <li>HTML</li>
             <li>CSS</li>
             <li>JavaScript</li>
          </ol>
       </body>
    </html>

    CSS list-style-position Property

    The list-style-property deals with the long text, it determines whether to align the second line of a list text with the marker or with the first line itself.

    list-style-position values

    • none
    • inside
    • outside

    Example

    <html>
       <head>
       </head>
       <body>
    
          <ul style = "list-style-position:outside; ">
             <li>HTML stands for HyperText Markup Langugae. It is a standared Languge for web-pages. It is not a programming language </li>
          </ul>
    
          <ol style = "list-style-position:inside";>
             <li>HTML stands for HyperText Markup Langugae. It is a standared Languge for web-pages. It is not a programming language </li>
          </ol>
       </body>
    </html>

    CSS list-style-image Property

    The list-style-image property specifies an image as a bullet marker. It accepts the image value using the url() function. If the browser fails to load the image then the default marker would be displayed.

    Example:

          <ol>
             <li style="list-style-image: url(images/img.png);">  HTML</li>
             <li>CSS</li>
             <li>JavaScript</li>
          </ol>

    CSS list-style Property

    It is a shorthand property for all the other properties we have mentioned above. Using this single property we can set list-style-type, list-style-position and list-style-image using a single statement.

    Syntax:

    {
    
     list-style : list-style-type list-style-position list-style-image;
    
    }

    Example:

    <ol style = "list-style: square inside; url('images/bullet.png')">
             <li>HTML</li>
             <li>CSS</li>
             <li>JavaScript</li>
      </ol> 

    Summary

    • HTML has two lists tags <ol> and <ul>
    • <ol> or ordered list use numbering as a marker
    • <ul> list use bullets points as a marker.
    • To change the appearance of the marker we can use the list-style-type property.
    • To change the alignment of the list text we can use the list-style-position property.
    • To set an image as a marker we can use the list-style-image property.