CSS - list-style-image


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

  • 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 −

<html>
   <head>
   </head>
   
   <body>
      <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>
   </body>
   
</html> 

This will produce following result −

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 −

<html>
   <head>
   </head>
   
   <body>
      <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>
   </body>
   
</html> 

This will produce following result −



Advertisements