Web | This Site

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

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

# CSS - list-style-image

## Description:

The list-style-image property defines a pointer to an image resource that is to be used as the marker for list items.

## Possible Values:

- uri : A pointer to an image resource. If the URL cannot be resolved, then the property is treated as if the value were none.
- none: No image should be used as a marker for the element.

## Applies to:

All the elements with a display of list-item.

## DOM Syntax:

object.style.listStyleImage="/images/bullet.gif"

## Example:

Here is the example:

    <ul>
    <li style="list-style-image: url(/images/bullet.gif);">Maths</li>
    <li>Social Science</li>
    <li>Physics</li>
    </ul>
    <ol>
    <li style="list-style-image: url(/images/bullet.gif);">Maths</li>
    <li>Social Science</li>
    <li>Physics</li>
    </ol>

This will produce following result:

- Maths
- Social Science
- Physics

1. Maths
2. Social Science
3. Physics

To Become more comfortable - Do Online Practice

# CSS list-style-position

## Description:

The list-style-position property affects the placement of a marker in relation to the content of the list item.

## Possible Values:

- inside : The marker is made an inline element at the beginning of the first line of the list item's content.
- outside : The marker is placed outside the box containing the list item's content.

## Applies to:

All the elements with a display of list-item.

## DOM Syntax:

object.style.listStylePosition="inside";

## Example:

Here is the example:

    <ul style="list-style-type:circle; list-stlye-position:outside;">
    <li>Maths</li>
    <li>Social Science</li>
    <li>Physics</li>
    </ul>
    <ul style="list-style-type:square;list-style-position:inside;">
    <li>Maths</li>
    <li>Social Science</li>
    <li>Physics</li>
    </ul>
    <ol style="list-style-type:decimal;list-stlye-position:outside;">
    <li>Maths</li>
    <li>Social Science</li>
    <li>Physics</li>
    </ol>
    <ol style="list-style-type:lower-alpha;list-style-position:inside;">
    <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

To Become more comfortable - Do Online Practice

Advertisement

Online Image Processing

Indian Baby Names