In HTML, we have two types of lists: ordered and unordered. Ordered lists are numbered with alphabet or Roman numbers, while unordered lists use dots. Sometimes we may want to replace these bullets with an image. To do this, we can use the CSS styling property list-style-image. This allows us to set an image URL or address as the value of the list-style image, which will then appear as a bullet before the list items. In this article, we will see how to create an image bullet in HTML.
Syntax:
list-style-image: url( );
Approach:
- Creating the basic HTML structure with heading and subheading by using <h1> and <h3> tags.
- Add the list items in the ol tag using li.
- Use CSS to define the image bullet style. Utilize the `list-style-image` property, setting its value to the URL of the desired image.
- Adjust the styling properties as needed, such as color or margin.
Example: The below code illustrates the use of the list-style-image property to create image bullets using CSS.
HTML
<!DOCTYPE html><html>
<head>
<title>
Create an image bullets in HTML
</title>
<style>
h1 {
color: green;
}
ul {
list-style-image: url(
margin-left: 40px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks </h1>
<h2>Create an image bullets in HTML</h2>
<p>List of Courses</p>
<ul>
<li>MERN</li>
<li>DSA</li>
<li>DevOps</li>
<li>MEAN</li>
<li>Data Science</li>
</ul>
</body>
</html>
|
Output