Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
In CSS using Images as List Markers
The CSS list-style-image property is used to set an image as a marker for the list item.
Syntax
The syntax of CSS list-style-image property is as follows −
Selector { list-style-image: /*value*/ } Example
The following examples illustrate CSS list-style-image property −
<!DOCTYPE html> <html> <head> <style> ul { width: 150px; list-style-image: url("https://www.tutorialspoint.com/images/Servlets.png"); background: goldenrod; } li { text-align: center; background: lavenderblush; margin: 5px 30px; } </style> </head> <body> <h2>Servlets</h2> <ul> <li>Client Request</li> <li>Server Response</li> <li>Cookies Handling</li> <li>Session Tracking</li> </ul> </body> </html> Output
This gives the following output −
Example
<!DOCTYPE html> <html> <head> <style> ul { margin-left: 20px; list-style-image: url("https://www.tutorialspoint.com/images/hibernate.png"); } li { font-size: 1.3em; text-align: center; background: burlywood; margin: 3px; } </style> </head> <body> <h2>Hibernate Tutorial</h2> <ul> <li>Sessions</li> <li>Persistent Class</li> <li>Mapping Files</li> <li>Mapping Types</li> <li>Annotations</li> </ul> </body> </html> Output
This gives the following output −
Updated on: 2020-01-06T09:47:29+05:30
855 Views
Advertisements