totn CSS

CSS: list-style-image property

This CSS tutorial explains how to use the CSS property called list-style-image with syntax and examples.

Description

The CSS list-style-image property defines the image to use as the list item marker, which is the image that appears before each list item.

Syntax

The syntax for the list-style-image CSS property is:

list-style-image: value;

Parameters or Arguments

value

The image to use for the list marker. It can be one of the following:

Value Description
url Location of the image resource
ul { list-style-image: url("/images/symbol.png"); }
none No image (this is the default)
ul { list-style-image: none; }
inherit Element will inherit the list-style-image from its parent element
ul { list-style-image: inherit; }

Note

Browser Compatibility

The CSS list-style-image property has basic support with the following browsers:

  • Chrome
  • Firefox (Gecko)
  • Internet Explorer (IE)
  • Opera
  • Safari (WebKit)

Example

We will discuss the list-style-image property below, exploring examples of how to use this property in CSS.

With Ordered Lists

Let's look at a CSS list-style-image example where we apply the list-style-image to an ordered list.

But first, let's look at how an ordered list looks without applying any styling. If we created an ordered list, the HTML would look like this:

<ol>
  <li>TechOnTheNet.com</li>
  <li>CheckYourMath.com</li>
  <li>BigActivities.com</li>
</ol>

And the ordered list would appear as follows:

  1. TechOnTheNet.com
  2. CheckYourMath.com
  3. BigActivities.com

Now let's apply an image for the list item marker using the list-style-image property. The CSS would look like this:

ol { list-style-image: url("/images/symbol.gif"); }

The ordered list would now display as follows:

CSS

In this CSS list-style-image example, we have chosen to display the image called symbol.gif in front of each list item in the <ol> tag. As you can see, the symbol.gif image replaces any numbering that would normally appear in an ordered list.

With Unordered Lists

Next, let's look at a CSS list-style-image example where we apply the list-style-image to an unordered list. So if we created an unordered list, the HTML would look like this:

<ul>
  <li>TechOnTheNet.com</li>
  <li>CheckYourMath.com</li>
  <li>BigActivities.com</li>
</ul>

And the unordered list would appear as follows:

  • TechOnTheNet.com
  • CheckYourMath.com
  • BigActivities.com

Now if we apply an image for the list item marker using the list-style-image property, the CSS would look like this:

ul { list-style-image: url("/images/symbol.gif"); }

The unordered list would now display as follows:

CSS

In this list-style-image example, the disc from the front of each list item in the <ul> tag will be replaced with the symbol.gif image.

With List Items

You can also apply the list-style-image property directly to the list item as follows:

li { list-style-image: url("/images/symbol.gif"); }

This would also result in the list items appearing as follows (regardless of whether the list items are part of an ordered or unordered list):

CSS

Share on: