How to Put Your Image in List Item with CSS

Share!

Lists are useful when you want to list your text in a number or bullet style. But you don’t always want to use the default, boring list style. What would look even better is if you use your own image or style instead. Follow the steps provided in this tutorial to put your own image in list item using CSS.

Steps to put your image in list item with CSS

1. First of all, create an html file. You may use any IDE like notepad or notepad ++ or Adobe Dreamweaver to create an html file. In this tutorial, we are using plain notepad that is available on any Windows PC. Open notepad any type following code:

<html>
<head>
<title>CSS tutorial – 6</title>
<link rel=”stylesheet” type=”text/css” href=”css/style.css” />
</head>
<body>
<h3>Fruits:</h3>
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Oranges</li>
</ul>
</body>
</html>

And then save the file as .html (eg: tut6.html).
Here,
<link rel=”stylesheet” type=”text/css” href=”css/style.css” /> will link the stylesheet that we are going to create.

The <ul> tag creates an unordered list whereas <ol> tag creates ordered list.

How to Put Your Image in List Item with CSS create html image list

2. Next, put the small image (usually less than 20px width and 20px height) in the same folder where your html file is.

step-2-save-image-list How to Put Your Image in List Item with CSS create css image list step-4-type-css-image-list

3. Next, in the same directory (folder), create another folder named css and create a new css file named style.css. To do that, open notepad and save it as style.css

How to Put Your Image in List Item with CSS create css image

4. Next, type the following code in the css file we have created in step-2 i.e. style.css

ul{
margin-left: 15px;
list-style-image:url(‘../img1.gif’);
}

Here,

margin-left will add the margin to the left and list-style-image will add an image as a list item instead of a default oval list.

How to Put Your Image in List Item with CSS type css image list

This completes our tutorial on how to put your image in list item with CSS. If you’ve found this CSS tutorial helpful, please leave a comment below!

Recommended for you:



Leave a Reply

Your email address will not be published. Required fields are marked *