`).
- For both lists, we use the `list-style-image` property to set a custom image as the list item marker. In this case, we use `url('custom-bullet.png')` for the unordered list and `url('custom-number.png')` for the ordered list.
- The custom images, ‘custom-bullet.png’ and ‘custom-number.png’, should be located in the same directory as your HTML file or should have the correct path to their location.
This results in using custom images as list item markers instead of the default bullets or numbers. You can replace the image URLs with your own custom marker images as needed.
**3.list-style-position**: This property controls the positioning of the list marker (bullet or number) relative to the content. You can set it to “inside” (marker inside the content box) or “outside” (marker outside the content box).
**Example : **
The `list-style-position` property in CSS is used to control the position of the list item markers (bullets or numbers) in ordered and unordered lists. You can set it to `inside` or `outside`. Here’s an example of how to use `list-style-position` in HTML:
```xml
Unordered List
Inside List (list-style-position: inside):
Outside List (default):
Ordered List
Inside List (list-style-position: inside):
- First Item
- Second Item
- Third Item
Outside List (default):
- First Item
- Second Item
- Third Item
Code language: HTML, XML (xml)
```
**Output : **
**In this example:**
- We have two unordered lists (``) and two ordered lists (``).
- For each type of list, we create two sets: one with the `list-style-position` set to `inside` and the other using the default value, which is `outside`.
The `list-style-position: inside;` style places the list item markers (bullets or numbers) inside the list items, while the default `list-style-position: outside;` places them outside the list items.
You can observe the visual difference in the positioning of the list item markers between the “Inside List” and “Outside List” examples for both unordered and ordered lists.
**4.list-style**: If you want to apply multiple list-related properties in a single declaration, you can use the shorthand property `list-style`. It combines `list-style-type`, `list-style-image`, and `list-style-position` into one declaration.
**Example : **
The `list-style` property in CSS is a shorthand property used to set the style, image, and position of the list item markers (bullets or numbers) in ordered and unordered lists. Here’s an example of how to use the `list-style` property in HTML:
```xml
Unordered List
Ordered List
- First Item
- Second Item
- Third Item
Code language: HTML, XML (xml)
```
**Output : **
**In this example:**
- We have an unordered list (``) and an ordered list (``).
- For the unordered list, we use the `list-style` property to set the list item marker style to `square`, position to `inside`, and a custom image as the marker using `url('custom-bullet.png')`.
- For the ordered list, we use the `list-style` property to set the list item marker style to `upper-roman` (default marker type) and the position to `outside`.
You can customize the appearance of list item markers by using the `list-style` shorthand property to set various properties like style, position, and image.
These CSS properties allow you to customize the appearance of lists on your website, making them visually appealing and consistent with your overall design.
### Related posts:
[CSS – Position](https://blog.khanwaseem.com/css-position/)
[HTML – Lists](https://blog.khanwaseem.com/html-lists/)
[CSS – @ Rules](https://blog.khanwaseem.com/css-rules/)
[CSS – Pseudo Classes](https://blog.khanwaseem.com/css-pseudo-classes/)
Powered by [YARPP](https://yarpp.com).