How to Put Your Image in List Item with CSS
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:
<title>CSS tutorial – 6</title>
<link rel=”stylesheet” type=”text/css” href=”css/style.css” />
And then save the file as .html (eg: tut6.html).
<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.
2. Next, put the small image (usually less than 20px width and 20px height) in the same folder where your html file is.
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
4. Next, type the following code in the css file we have created in step-2 i.e. style.css
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.
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!
You may also like:
- 5 Steps to Building an Email List for Ecommerce
- Layout Examples Of How Blogs List Their Posts
- The Ultimate Programming Cheat Sheet List For Web Designers And Developers
- Web Design Resources: Designer's #1 TO-DO list (Choose the right domain, hosting,…
- 10 Amazing Responsive Image Galleries
- 36 Image Hover Effects Made with CSS3
- 10 Awesome jQuery Image Galleries and Sliders
- Display icons using a single image and CSS "Sprites"
- Create a Full Page Background Image with CSS3
- 20 Best Premium and Free Image Hover Effect Plugins
Subscribe to our RSS feed!
Popular on Web Design Dev:
- Free Wix Website Templates
- 20+ Portfolio Website Templates for Architects
- 20+ Portfolio Website Templates for Artists
- Creative Resume Templates for Web Designers
- Web Safe Fonts with CSS
- Best Free Tumblr Themes
- 20+ Free HTML Templates
- Professional Free Bootstrap Themes
- Best Shopify Themes for High Conversions
- 20+ Events Production Website Templates