Skip to content
Related Articles

Related Articles

CSS | list-style-type Property
  • Last Updated : 09 Aug, 2019

The list-style-type property in CSS specifies the appearance of the list item marker (such as a disc, character, or custom counter style) if ‘list-style-image’ has the value ‘none’.

Syntax:

list-style-type: disc|circle|square|decimal|lower-roman|upper-roman|
lower-greek|lower-latin|upper-latin|lower-alpha|upper-alpha|none|
inherit;

Property values:

  • disc:This is the default value. The marker is a filled circle.
    Syntax:

    list-style-type: disc;

    Example:






    <!DOCTYPE html>
    <html>
        <head>
            <title>CSS list-style-type Property</title>
            <style>
            .geek1 {
              list-style-type: disc;
            }
            </style>
        </head>
        <body>
        <h1 style = "text-align: center; color: green">
            list-style-type: disc;
        </h1>
        <p>Sorting Algorithms</p>
        <ul class="geek1">
          <li>Bubble Sort </li>
          <li>Merge Sort</li>
          <li>Insertion Sort</li>
        </ul>
          
        </body>
    </html>

    
    

    Output:
    disc

  • circle:The marker is a hollow circle.
    Syntax:

    list-style-type: circle;

    Example:




    <!DOCTYPE html>
    <html>
        <head>
            <title>CSS list-style-type Property</title>
            <style>
            .geek1 {
              list-style-type: circle;
            }
            </style>
        </head>
        <body>
        <h1 style = "text-align: center; color: green">
            list-style-type: circle;
        </h1>
        <p>Sorting Algorithms</p>
        <ul class="geek1">
          <li>Bubble Sort </li>
          <li>Merge Sort</li>
          <li>Insertion Sort</li>
        </ul>
          
        </body>
    </html>

    
    

    Output:
    circle

  • square:The marker is a square.
    Syntax:

    list-style-type: square;

    Example:




    <!DOCTYPE html>
    <html>
        <head>
            <title>CSS list-style-type Property</title>
            <style>
            .geek1 {
              list-style-type: square;
            }
            </style>
        </head>
        <body>
        <h1 style = "text-align: center; color: green">
            list-style-type: square;
        </h1>
        <p>Sorting Algorithms</p>
        <ul class="geek1">
          <li>Bubble Sort </li>
          <li>Merge Sort</li>
          <li>Insertion Sort</li>
        </ul>
          
        </body>
    </html>

    
    

    Output:
    square

  • decimal:The marker is a decimal numbers, beginning with 1.
    Syntax:

    list-style-type: decimal;

    Example:




    <!DOCTYPE html>
    <html>
        <head>
            <title>CSS list-style-type Property</title>
            <style>
            .geek1 {
              list-style-type: decimal;
            }
            </style>
        </head>
        <body>
        <h1 style = "text-align: center; color: green">
            list-style-type: decimal;
        </h1>
        <p>Sorting Algorithms</p>
        <ul class="geek1">
          <li>Bubble Sort </li>
          <li>Merge Sort</li>
          <li>Insertion Sort</li>
        </ul>
          
        </body>
    </html>

    
    

    Output:
    decimal

  • lower-roman:The marker is a lowercase roman numerals (i, ii, iii, iv, v, etc.).

    Syntax:

    list-style-type: lower-roman;

    Example:






    <!DOCTYPE html>
    <html>
        <head>
            <title>CSS list-style-type Property</title>
            <style>
            .geek1 {
              list-style-type: lower-roman;
            }
            </style>
        </head>
        <body>
        <h1 style = "text-align: center; color: green">
            list-style-type: lower-roman;
        </h1>
        <p>Sorting Algorithms</p>
        <ul class="geek1">
          <li>Bubble Sort </li>
          <li>Merge Sort</li>
          <li>Insertion Sort</li>
        </ul>
          
        </body>
    </html>

    
    

    Output:
    lower-roman

  • upper-roman:The marker is a uppercase roman numerals (I, II, III, IV, V, etc.).

    Syntax:

    list-style-type: upper-roman;

    Example:




    <!DOCTYPE html>
    <html>
        <head>
            <title>CSS list-style-type Property</title>
            <style>
            .geek1 {
              list-style-type: upper-roman;
            }
            </style>
        </head>
        <body>
        <h1 style = "text-align: center; color: green">
            list-style-type: upper-roman;
        </h1>
        <p>Sorting Algorithms</p>
        <ul class="geek1">
          <li>Bubble Sort </li>
          <li>Merge Sort</li>
          <li>Insertion Sort</li>
        </ul>
          
        </body>
    </html>

    
    

    Output:
    upper-roman

  • lower-greek:The marker is a lowercase classical Greek alpha, beta, gamma, … (?, ?, ?, …).

    Syntax:

    list-style-type: lower-greek;

    Example:




    <!DOCTYPE html>
    <html>
        <head>
            <title>CSS list-style-type Property</title>
            <style>
            .geek1 {
              list-style-type: lower-greek;
            }
            </style>
        </head>
        <body>
        <h1 style = "text-align: center; color: green">
            list-style-type: lower-greek;
        </h1>
        <p>Sorting Algorithms</p>
        <ul class="geek1">
          <li>Bubble Sort </li>
          <li>Merge Sort</li>
          <li>Insertion Sort</li>
        </ul>
          
        </body>
    </html>

    
    

    Output:
    lower-greek

  • lower-latin:The marker is a lowercase ascii letters (a, b, c, … z).

    Syntax:

    list-style-type: lower-latin;

    Example:




    <!DOCTYPE html>
    <html>
        <head>
            <title>CSS list-style-type Property</title>
            <style>
            .geek1 {
              list-style-type: lower-latin;
            }
            </style>
        </head>
        <body>
        <h1 style = "text-align: center; color: green">
            list-style-type: lower-latin;
        </h1>
        <p>Sorting Algorithms</p>
        <ul class="geek1">
          <li>Bubble Sort </li>
          <li>Merge Sort</li>
          <li>Insertion Sort</li>
        </ul>
          
        </body>
    </html>

    
    

    Output:
    lower-latin

  • upper-latin:The marker is a uppercase ascii letters (A, B, C, … Z).

    Syntax:

    list-style-type: upper-latin;

    Example:




    <!DOCTYPE html>
    <html>
        <head>
            <title>CSS list-style-type Property</title>
            <style>
            .geek1 {
              list-style-type: upper-latin;
            }
            </style>
        </head>
        <body>
        <h1 style = "text-align: center; color: green">
            list-style-type: upper-latin;
        </h1>
        <p>Sorting Algorithms</p>
        <ul class="geek1">
          <li>Bubble Sort </li>
          <li>Merge Sort</li>
          <li>Insertion Sort</li>
        </ul>
          
        </body>
    </html>

    
    

    Output:
    upper-latin

  • none:No marker is shown in this mode.
    Syntax:

    list-style-type: none;

    Example:




    <!DOCTYPE html>
    <html>
        <head>
            <title>CSS list-style-type Property</title>
            <style>
            .geek1 {
              list-style-type: none;
            }
            </style>
        </head>
        <body>
        <h1 style = "text-align: center; color: green">
            list-style-type: none;
        </h1>
        <p>Sorting Algorithms</p>
        <ul class="geek1">
          <li>Bubble Sort </li>
          <li>Merge Sort</li>
          <li>Insertion Sort</li>
        </ul>
          
        </body>
    </html>

    
    

    Output:
    none

Note: lower-alpha and upper-alpha are same as lower-latin and upper-latin respectively.
Supported Browsers: The browser supported by list-style-type property are listed below:

  • Google Chrome 1.0
  • Internet Explorer 4.0
  • Firefox 1.0
  • Opera 7.0
  • Apple Safari 1.0

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :