List Style Properties in CSS: Everything You Need to Know

  • Blog /
  • List Style Properties in CSS: Everything You Need to Know
Blog Featured Image

CSS provides several properties to style lists, including ordered, unordered, and definition lists. These properties help control the appearance of list markers, the position of markers, and even allow for the use of images as markers.

Key Reasons to Use CSS for Lists

Using CSS for lists provides several advantages that enhance both the design and functionality of web content. Here are some key reasons to use CSS for lists:

  1. Custom Styling: CSS allows you to customize the appearance of list markers, such as bullets and numbers, to fit the design of your site. You can change markers from default bullets to numbers, letters, Roman numerals, or even custom images.
  2. Improved Readability: CSS lets you control the alignment and positioning of list markers, making it easier for users to follow and read structured content. You can ensure that long text items are well aligned and don’t overlap with markers.
  3. Visual Appeal: Lists can be made more visually attractive by using custom markers, colors, and images. This enhances the overall look and feel of the page, keeping the design cohesive.
  4. Efficient Layouts: CSS offers the flexibility to modify list layouts for different screen sizes, improving responsiveness. You can adjust list styles for mobile and desktop views, ensuring a consistent user experience across devices.
  5. Control and Flexibility: CSS provides fine control over how lists behave and look, from spacing and indentation to marker types and image-based markers, making it easy to align lists with specific design requirements.

Types of Lists:

  1. Unordered List (<ul>): Displays items with bullet points.
  2. Ordered List (<ol>): Displays items with numbers or letters.
  3. Description List (<dl>): Used to display a set of terms and their descriptions.

CSS Properties for Lists

CSS provides a set of properties to style and control the appearance of both unordered (<ul>), ordered (<ol>), and description lists (<dl>). These properties give you the ability to modify the style of list markers, change their position, or even use images in place of traditional list bullets or numbers.

1. list-style-type

This property controls the type of marker (bullet or numbering style) used for list items.

Values:

  • Unordered lists (<ul>):
    • disc (default)
    • circle
    • square
    • none (no marker)
  • Ordered lists (<ol>):
    • decimal (default)
    • decimal-leading-zero (adds leading zeros, e.g., 01, 02)
    • lower-alpha, upper-alpha (lowercase or uppercase letters: a, b, c or A, B, C)
    • lower-roman, upper-roman (roman numerals: i, ii, iii or I, II, III)

Unordered lists 1

HTML Unordered List Example : 

Copied



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>List Style Type Example</title>

 <style>
body{ padding: 0; margin: 0;  }
.unorders{  background: #000; color: #fff;padding: 20px 30px;}
ul.disc-list {list-style-type: disc;}
ul.circle-list {list-style-type: circle;}
ul.square-list {list-style-type: square;}
ul.none-list { list-style-type: none; }
</style>

</head>
<body>

<div class="unorders">

  <h2>Unordered List with Disc (default)</h2>

 <ul class="disc-list">
<li>Item 1</li>
<li>Item 2</li>
</ul>

  <h2>Unordered List with Circle</h2>

 <ul class="circle-list">
<li>Item 1</li>
<li>Item 2</li>
</ul>

 <h2>Unordered List with Square</h2>

<ul class="square-list">
<li>Item 1</li>
<li>Item 2</li>
</ul>

 <h2>Unordered List with No Marker</h2>

<ul class="none-list">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>

</body>
</html>

Ordered lists

HTML Ordered List Example : 

Copied



<!DOCTYPE html>
<html lang="en">
<head> 
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>List Style Type Example</title>

  <style>
body{ padding: 0; margin: 0;  }
.order_list{  background: #000; color: #fff;padding: 20px 30px;}
ol.decimal-list {list-style-type: decimal;}ol.alpha-list {list-style-type: lower-alpha;}
ol.roman-list {list-style-type: upper-roman;}
ol.none-list {list-style-type: none; }
</style>

</head>
<body>

<div class="order_list">
<h2>Ordered List with Decimal (default)</h2>

<ol class="decimal-list">
<li>Item 1</li>
<li>Item 2</li>
</ol>

<h2>Ordered List with Lower Alpha</h2>
<ol class="alpha-list">
<li>Item a</li>
<li>Item b</li>

</ol>

 <h2>Ordered List with Upper Roman</h2>
<ol class="roman-list">
<li>Item I</li>
<li>Item II</li>
</ol>

<h2>Ordered List with No Marker</h2>

 <ol class="none-list">
<li>Item 1</li>
<li>Item 2</li>
</ol>

</div>

</body>
</html>

2. list-style-position

The list-style-position property in CSS defines where the list item marker (bullet, number, etc.) should appear relative to the list content. This property affects both ordered (<ol>) and unordered (<ul>) lists.

  • Applicable to: <ul>, <ol>

  • Default value: outside

Values:

  • inside : The marker is placed inside the list item, and the text wraps under the marker if it spans multiple lines.
  • outside : The marker is placed outside the list item, and the list item text is aligned normally after the marker.

list-style-position

HTML Example : 

Copied



<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>List Style Position Example</title>

 <style>

 body{ padding: 0; margin: 0;  }
.style_positions{  background: #000; color: #fff;padding: 20px 30px;}
ul.outside-list {list-style-position: outside;}
ul.inside-list {list-style-position: inside;}
ol.outside-list {list-style-position: outside;}
ol.inside-list {list-style-position: inside; }

  </style>

</head>
<body>

<div class="style_positions">
  <h2>Unordered List with Marker Outside (default)</h2>

 <ul class="outside-list">
<li>This is a list item with the marker outside.</li>
<li>This is another list item. This is another list item.</li>
</ul>

  <h2>Unordered List with Marker Inside</h2>

 <ul class="inside-list">
<li>This is a list item with the marker inside.</li>
<li>This is another list item. This is another list item.</li>
</ul>

<h2>Ordered List with Marker Outside (default)</h2>

<ol class="outside-list">
<li>This is a list item with the marker outside.</li>
<li>This is another list item. This is another list item.</li>
</ol>

 <h2>Ordered List with Marker Inside</h2>

 <ol class="inside-list">
<li>This is a list item with the marker inside.</li>
<li>This is another list item. This is another list item.</li>
  </ol>
</div>

</body>
</html>

3. list-style-image

The list-style-image property in CSS allows you to specify a custom image to be used as the marker for list items instead of the default bullet or numbering style. This property applies to both unordered (<ul>) and ordered (<ol>) lists.

  • url(image-path): Specifies the path to the image to be used as the list marker.

  • none: No image is used. The default marker (bullet or number) will be shown.

HTML example :

Copied



<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>List Style Image Example</title>

  <style>

ul.custom-marker {list-style-image: url('https://example.com/custom-icon.png'); /* Custom image */}

ul.default-marker { list-style-image: none; /* No custom image, use default marker */}

  </style>

</head>

<body>

  <h2>Unordered List with Custom Image Marker</h2>

  <ul class="custom-marker">

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

  </ul>

  <h2>Unordered List with Default Marker</h2>

  <ul class="default-marker">

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

  </ul>

</body>

</html>

Conclusion

CSS lists provide powerful styling options to enhance the presentation and functionality of both ordered and unordered lists. With properties like list-style-type, list-style-position, and list-style-image, you can customize marker styles, control marker placement, and even use custom images for list markers. The shorthand list-style property simplifies the process by allowing all list styles to be set in one declaration. Mastering these properties enables you to create visually appealing and structured lists, contributing to a better design and user experience on your website.

If you need more details or have specific use cases, feel free to ask!