list-style-type - HTML CSS CSS Property

HTML CSS examples for CSS Property:list-style-type

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. list-style-type

Description

The list-style-type CSS property sets the type of marker for the list-items.

The following table summarizes the list-style-type Property.

Item Value
Default value: disc
Applies to:List items
Inherited: Yes
Animatable: No.

Syntax

The syntax of the property is as follows: 


list-style-type:     disc | 
                     circle | 
                     square | 
                     decimal | 
                     decimal-leading-zero | 
                     lower-roman | 
                     upper-roman | 
                     lower-greek | 
                     lower-latin | 
                     upper-latin | 
                     armenian | 
                     georgian | 
                     lower-alpha | 
                     upper-alpha | 
                     none | 
                     initial | 
                     inherit

Property Values

The following table describes the values of this property.

Value Description
disc a filled circle.
circle a hollow circle.
square a filled square.
decimal a Decimal number Beginning with 1.
decimal-leading-zero Decimal number Padded by initial zero (e.g., 01, 02, 03, ... 10, 11)
lower-roman Lowercase roman numerals (i, ii, iii, iv, v, ...)
upper-roman Uppercase roman numerals (I, II, III, IV, V, ...)
lower-greek Lowercase Greek letters alpha, beta, gamma, ...
lower-latin Lowercase Latin letters b. (a, b, c, ... z)
upper-latin Uppercase Latin letters (A, B, C, ... Z)
armenian Traditional Armenian numbering
georgian Traditional Georgian numbering
lower-alpha Uppercase Latin letters (a, b, c, ... z)
upper-alpha Uppercase Latin letters (A, B, C, ... Z)
none Set no marker.
initial Sets this property to its default value.
inherit take the value of its parent element list-style-type property.

The example below shows the list-style-type property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of list-style-type Property</title>
  <style type="text/css">
    ol {<!--  w  w w  .  ja v a 2 s . c o m-->
      list-style-type: decimal-leading-zero;
    }
    ul {
      list-style-type: square;
    }
    </style>
 </head>
 <body>
  <h2>Ordered List</h2>
  <ol>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
  </ol>
  <h2>Unordered List</h2>
  <ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
  </ul>
 </body>
</html>

Related Tutorials