Copyright © tutorialspoint.com

CSS - list-style-image

previous next


Advertisements

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:

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:

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


previous next

Copyright © tutorialspoint.com