CSS | list-style-type Property

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

My Personal Notes

Recommended Posts: