<h1 id="heading-css-lists"><strong>CSS Lists</strong></h1>
<p><strong>Different List Item Markers</strong></p>
<p>The <code>list-style-type</code> property specifies the type of list item marker.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1686369736813/256ea2de-ab0e-40fd-b765-2fb80763bb51.png" alt class="image--center mx-auto" /></p>
<h1 id="heading-an-image-as-the-list-item-marker">An Image as The List Item Marker</h1>
<p>The <code>list-style-image</code> property specifies an image as the list item marker:</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1686369783355/4e3bf61b-3159-41a6-8ed4-12ab9a4062a1.png" alt class="image--center mx-auto" /></p>
<h1 id="heading-position-the-list-item-markers">Position The List Item Markers</h1>
<p>The <code>list-style-position</code> property specifies the position of the list-item markers (bullet points).</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1686369886361/0b90dc8e-15bb-44f2-b496-509c2ecadf24.png" alt class="image--center mx-auto" /></p>
<p>Example:</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1686369967536/ae57591e-7280-4f8b-a902-c04edc8375fc.png" alt class="image--center mx-auto" /></p>
<hr />
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1666336375150/5HqI8zNVh.png" alt="image.png" /></p>
<p>Download our HTML &amp; CSS Visual Treat! ebook Here: <a target="_blank" href="https://codemarch.gumroad.com/l/hxazr">Click here</a></p>


# **CSS Lists**

**Different List Item Markers**

The `list-style-type` property specifies the type of list item marker.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1686369736813/256ea2de-ab0e-40fd-b765-2fb80763bb51.png align="center")

# An Image as The List Item Marker

The `list-style-image` property specifies an image as the list item marker:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1686369783355/4e3bf61b-3159-41a6-8ed4-12ab9a4062a1.png align="center")

# Position The List Item Markers

The `list-style-position` property specifies the position of the list-item markers (bullet points).

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1686369886361/0b90dc8e-15bb-44f2-b496-509c2ecadf24.png align="center")

Example:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1686369967536/ae57591e-7280-4f8b-a902-c04edc8375fc.png align="center")

---

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1666336375150/5HqI8zNVh.png align="left")

Download our HTML & CSS Visual Treat! ebook Here: [Click here](https://codemarch.gumroad.com/l/hxazr)

CSS Lists

Table of contents

CSS Lists

An Image as The List Item Marker

Position The List Item Markers