codescracker


css

CSS List Style Image



« Previous Tutorial Next Tutorial »


In CSS, you can also use an image as a lists item marker. The image used as a list item marker should be smaller in size than the size of the list item.

You can use an image as a list item marker for both ordered and unordered list.

To display an image as a list item marker, you need to use the list-style-image property. You need to given the Uniform Resource Locator (URL) of the image that you want to use as a list item marker in the list-style-image property.

The syntax used to declare the list-style-image property is as follows :

list-style-image: <url> | none;

In the preceding syntax, <url> indicates the URL source for the list-marker graphic; whereas, none specifies that no list-marker is used for the list item.

CSS list-style-image Example

Let's look at the following example to understand it:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-image: url('coaSqr.jpg');
}
</style>
</head>
<body>

<ul>
  <li>Java</li>
  <li>SQL</li>
  <li>PHP</li>
</ul>

</body>
</html>

Here is the output of the above CSS example:

css images list property

« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test