CSS/Properties/list-style-type

From Web Education Community Group
Jump to: navigation, search

list-style-type

The list-style-type property specifies appearance of the list item marker if 'list-style-image' has the value 'none' or if the image pointed to by the URI cannot be displayed.

Description

Values disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit
Initial value disc
Applies to elements with 'display: list-item'
Inherited Yes


Values

For Unorderd List:

  • disc
    Filled circle marker (●).


  • circle
    Circle marker (○).



For Orderd List:

  • decimal
    Decimal numbers, beginning with 1.


  • decimal-leading-zero
    Decimal numbers padded by initial zeros (e.g., 01, 02, 03, ..., 98, 99).


  • lower-roman
    Lowercase roman numerals (i, ii, iii, iv, v, etc.).


  • upper-roman
    Uppercase roman numerals (I, II, III, IV, V, etc.). [Example B]


  • lower-greek
    Lowercase classical Greek alpha, beta, gamma, ... (α, β, γ, ...)


  • lower-latin
    Lowercase ascii letters (a, b, c, ... z).


  • upper-latin
    Uppercase ascii letters (A, B, C, ... Z).


  • armenian
    Traditional uppercase Armenian numbering.


  • georgian
    Traditional Georgian numbering (an, ban, gan, ..., he, tan, in, in-an, ...).


  • lower-alpha
    Lowercase ascii letters (a, b, c, ... z).


  • upper-alpha
    Uppercase ascii letters (A, B, C, ... Z).


  • none
    Specifies no marker


  • inherit
    Takes the same specified value as the property for the element's parent.


Example

Example A

[style.css]

 ul{
   list-style-type: square;
 } 

[index.html]

<body>
  <ul>
    <li>list-item 1</li>
    <li>list-item 2</li>
    <li>list-item 3</li>
  </ul>
</body>

Csslist2 list-style-type.png

Example B

[style.css]

 ol{
   list-style-type: upper-roman;
 } 

[index.html]

<body>
  <ol>
    <li>list-item 1</li>
    <li>list-item 2</li>
    <li>list-item 3</li>
  </ol>
</body>


Csslist2 list-style-type2.png

CSS Reference

The CSS specification defines the list-style-type property in 12.5.1 Lists.