Copyright © tutorialspoint.com

# CSS - list-style

## Description:

The list-style property is a shorthand property used to set the position and type of markers in a list; it can also be used to assign an image as the marker.

## Possible Values:

- <list-style-type> : Any permitted value for the property list-style-type.
- <list-style-position>: Any permitted value for the property list-style-position.
- <list-style-image>: Any permitted value for the property list-style-image.

## Applies to:

All the elements with a display of list-item.

## DOM Syntax:

object.style.listStyle="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

Copyright © tutorialspoint.com