Web | This Site

CSS Home
CSS Reference
Pseudo Classes & Elements
© 2011 TutorialsPoint.COM

| Home |  | References |  | Discussion Forums |  | About TP

# CSS - list-style-type

## Description:

The list-style-type property sets the counting (or bullet) style used in the marker for a list item.

## Possible Values:

Here are the values which can be used for an unordered list:

Value | Description
--- | ---
none | NA
disc (default) | A filled-in circle
circle | An empty circle
square | A filled-in square

Here are the values which can be used for an ordered list:

Value | Description | Example
--- | --- | ---
decimal | Number | 1,2,3,4,5
decimal-leading-zero | 0 before the number | 01, 02, 03, 04, 05
lower-alpha | Lowercase alphanumeric characters | a, b, c, d, e
upper-alpha | Uppercase alphanumeric characters | A, B, C, D, E
lower-roman | Lowercase Roman numerals | i, ii, iii, iv, v
upper-roman | Uppercase Roman numerals | I, II, III, IV, V
lower-greek | The marker is lower-greek | alpha, beta, gamma
lower-latin | The marker is lower-latin | a, b, c, d, e
upper-latin | The marker is upper-latin | A, B, C, D, E
hebrew | The marker is traditional Hebrew numbering |
armenian | The marker is traditional Armenian numbering |
georgian | The marker is traditional Georgian numbering |
cjk-ideographic | The marker is plain ideographic numbers |
hiragana | The marker is hiragana | a, i, u, e, o, ka, ki
katakana | The marker is katakana | A, I, U, E, O, KA, KI
hiragana-iroha | The marker is hiragana-iroha | i, ro, ha, ni, ho, he, to
katakana-iroha | The marker is katakana-iroha | I, RO, HA, NI, HO, HE, TO

## Applies to:

All the elements with a display of list-item.

## DOM Syntax:

object.style.listStyleType="decimal"

## Example:

Here is the example:

    <ul style="list-style-type:circle;">
    <li>Maths</li>
    <li>Social Science</li>
    <li>Physics</li>
    </ul>
    <ul style="list-style-type:square;">
    <li>Maths</li>
    <li>Social Science</li>
    <li>Physics</li>
    </ul>
    <ol style="list-style-type:decimal;">
    <li>Maths</li>
    <li>Social Science</li>
    <li>Physics</li>
    </ol>
    <ol style="list-style-type:lower-alpha;">
    <li>Maths</li>
    <li>Social Science</li>
    <li>Physics</li>
    </ol>
    <ol style="list-style-type:lower-roman;">
    <li>Maths</li>
    <li>Social Science</li>
    <li>Physics</li>
    </ol>

This will produce following result:

- Maths
- Social Science
- Physics

- Maths
- Social Science
- Physics

1. Maths
2. Social Science
3. Physics

1. Maths
2. Social Science
3. Physics

1. Maths
2. Social Science
3. Physics

To Become more comfortable - Do Online Practice

Advertisement

Online Image Processing

Indian Baby Names