Home 〉 CSS Tutorials 〉 CSS list-style Tutorial: Master list-style-type, position & image with Examples

CSS list-style Tutorial: Master list-style-type, position & image with Examples !

CSS list-style Tutorial: Master list-style-type, position & image with Examples !

Do you want to customize the appearance of your HTML lists? The CSS `list-style` properties let you define bullet types, positions, and even use images as list markers. This tutorial covers how to modify list aesthetics to match your website's design. Learn to transform plain lists into visually appealing components. Explore our detailed post on CSS list-style

Introduction

Styling lists in HTML using CSS helps improve readability and visual design. CSS provides a property called 'list-style', which controls how bullets or numbers appear in lists. Whether you're working with ordered ('<ol>') or unordered ('<ul>') lists, this guide will walk you through every detail.

Let's explore how to use 'list-style-type', 'list-style-position', 'list-style-image', and shorthand properties with step-by-step examples.

1. What is 'list-style' in CSS?

The 'list-style' property in CSS is used to define the appearance of list items. It's a shorthand for:

  • 'list-style-type'
  • 'list-style-position'
  • 'list-style-image'

2. 'list-style-type': Change Bullet or Number Style

The 'list-style-type' defines the marker style for a list item.

Common values:

  • 'disc' (default bullet for '<ul>')
  • 'circle'
  • 'square'
  • 'none'
  • 'decimal' (default for '<ol>')
  • 'lower-alpha', 'upper-roman', etc.

Example:

Code 📝

<!DOCTYPE html>
<html>
<head>
<style>

ul.circle-list {
list-style-type: circle;
}
ol.alpha-list {
list-style-type: lower-alpha;
}

</style>
</head>
<body>

<ul class="circle-list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ol class="alpha-list">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>

</body>
</html>

output 📌

  • HTML
  • CSS
  • JavaScript
  1. First
  2. Second
  3. Third
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

  • '<ul>' with 'circle' will show empty round bullets.
  • '<ol>' with 'lower-alpha' will display a, b, c instead of numbers.

3. 'list-style-position': Marker Placement

This property controls where the bullet or number appears in relation to the text.

Values:

  • 'outside' (default): Marker is outside the content box.
  • 'inside': Marker is inside the list item box.

Example:

Code 📝

<!DOCTYPE html>
<html>
<head>
<style>

ul.inside-list {
list-style-position: inside;
}
ul.outside-list {
list-style-position: outside;
}

</style>
</head>
<body>

<ul class="inside-list">
<li>Inside bullet</li>
<li>Aligned with text</li>
</ul>
<ul class="outside-list">
<li>Outside bullet</li>
<li>Default behavior</li>
</ul>

</body>
</html>

output 📌

  • Inside bullet
  • Aligned with text
  • Outside bullet
  • Default behavior
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

  • 'inside' makes bullets part of the content flow.
  • 'outside' aligns bullets outside the text block.

4. 'list-style-image': Custom Image Bullets

You can use your own image as a bullet.

Example:

Code 📝

<!DOCTYPE html>
<html>
<head>
<style>

ul.custom-image {
list-style-image: url('/images/image1.jpg');
}

</style>
</head>
<body>

<ul class="custom-image">
<li>Custom bullet 1</li>
<li>Custom bullet 2</li>
</ul>

</body>
</html>

output 📌

  • Custom bullet 1
  • Custom bullet 2
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

  • 'list-style-image' replaces default markers with the specified image.
  • Make sure the image is small and square for best results.
Please Note :
  • The URL '/images/image1.jpg' is used because the image is located in the 'images' folder.
  • If your image is in the same folder as your HTML file, you can simply use 'image1.jpg' as the URL.
  • For more information on file paths, check our complete blog post on 'file path'.

5. 'list-style': Shorthand Property

You can combine the three properties in one line:

Example 📄

ul {
list-style: square inside;
}
ul.custom {
list-style: url('icon.png') outside;
}

  • The order is: 'list-style-type', 'list-style-position', and 'list-style-image' (optional).
  • You can skip values you don't want to change.

Tips

  • Use 'list-style: none' to remove bullets completely (commonly used in nav menus).
  • Always test 'list-style-image' in different screen sizes.
  • Nest lists for subpoints and use different styles for clarity.

Conclusion

The 'list-style' property in CSS gives you full control over how lists look. By mastering 'list-style-type', 'list-style-position', and 'list-style-image', you can design lists that match your website's branding and improve readability.

Experiment with styles, mix values, and use shorthand for clean and efficient CSS!

Suggested Topics:

Related Topics:

Frequently Asked Questions (FAQs)

What's the default list style in CSS?

For '<ul>', it's 'disc outside'. For '<ol>', it's 'decimal outside'.

How do I remove bullets in a list?

Use 'list-style: none;' or 'list-style-type: none;'.

Can I use emojis instead of list-style-type?

Not directly, but you can use '::before' and 'content' with emojis for full control.

Why is my custom list-style-image not showing?

Check if the image URL is correct, accessible, and the file is a small-sized icon.

Previous Post Next Post