All CSS List Properties: A Comprehensive Guide Tutorial

Contents

CSS List Properties

Learn how to style and customize CSS lists with this comprehensive guide.

Understand list-style-type, list-style-image, list-style-position, and more.

CSS lists, styling lists, list-style-type, list-style-image, list-style-position, list styling techniques, customize list markers

Here are all the CSS properties related to lists:

list-style-type:

Specifies the type of marker used for list items.

The Values include:

none: No marker is displayed.

disc: Default, displays a filled circle marker.

circle: Displays a hollow circle marker.

square: Displays a square marker.

decimal: Displays decimal numbers as markers.

decimal-leading-zero: Displays decimal numbers with leading zeros as markers.

lower-roman: Displays lowercase Roman numerals as markers.

upper-roman: Displays uppercase Roman numerals as markers.

lower-alpha: Displays lowercase alphabetical characters as markers.

upper-alpha: Displays uppercase alphabetical characters as markers.

Custom values may also be used, such as Unicode characters or image URLs.

list-style-image: Specifies an image to be used as the marker for list items.

list-style-position:

Specifies the position of the marker relative to the list item content.

list-style-position Values include:

outside: The marker is outside the content area (default).

inside: The marker is inside the content area.

list-style:

Shorthand property to set all the list-related properties (type, position, and image) in one declaration.

list-style-image:

Shorthand property to set the image used as the marker for list items.

list-style-position:

Shorthand property to set the position of the marker for list items.

list-style-type:

Shorthand property to set the type of marker for list items.

It’s important to note that these properties are typically applied to the <ul> (unordered list) and <ol> (ordered list) elements or their respective <li> (list item) elements. The list-style properties allow you to customize the appearance of list items and their markers according to your desired style.

list-style: Complete examples code in HTML:

Here’s a complete HTML code example that demonstrates the use of the list-style property to set multiple list-related properties in one declaration for an unordered list (<ul>) and an ordered list (<ol>):

<!DOCTYPE html>
<html>
<head>
  <title>list-style Property Example</title>
  <style>
    ul {
      list-style: square inside url('path/to/custom-marker.png');
    }

    ol {
      list-style: decimal-leading-zero outside;
    }
  </style>
</head>
<body>
  <h1>list-style Property Example</h1>
  <h2>Unordered List</h2>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
  <h2>Ordered List</h2>
  <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ol>
</body>
</html>

Explanation:

1-In this example, the CSS code within the <style> tags demonstrates the use of the list-style property to set multiple list-related properties in one declaration:

ul:

list-style: square inside url(‘path/to/custom-marker.png’); sets the list item marker to a square shape (square), positions it inside the content area (inside), and uses a custom image as the marker (url(‘path/to/custom-marker.png’)). Replace ‘path/to/custom-marker.png’ with the actual path to your custom marker image.

ol:

list-style: decimal-leading-zero outside; sets the list item marker to decimal numbers with leading zeros (decimal-leading-zero) and positions it outside the content area (outside).

When you open this HTML file in a web browser, you will see the unordered list (<ul>) displayed with square markers positioned inside the content area and a custom image marker, and the ordered list (<ol>) displayed with decimal numbers with leading zeros as markers positioned outside the content area.

list-style-image:complete code in html

Here’s a complete HTML code example that demonstrates the use of the list-style-image property to set an image as the marker for list items in an unordered list (<ul>):

<!DOCTYPE html>
<html>
<head>
  <title>list-style-image Property Example</title>
  <style>
    ul {
      list-style-image: url('path/to/custom-marker.png');
    }
  </style>
</head>
<body>
  <h1>list-style-image Property Example</h1>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
</body>
</html>

Explanation:

1-In this example, the CSS code within the <style> tags demonstrates the use of the list-style-image property to set an image as the marker for list items in an unordered list:

ul:

list-style-image: url(‘path/to/custom-marker.png’); sets the image with the specified URL (url(‘path/to/custom-marker.png’)) as the marker for list items.

2-Replace ‘path/to/custom-marker.png’ with the actual path to your custom marker image.

When you open this HTML file in a web browser, you will see the unordered list (<ul>) displayed with the custom image as the marker for each list item. Make sure to adjust the path and filename in the CSS code according to the location of your custom marker image.

list-style-position:complete code in html

Here’s a complete HTML code example that demonstrates the use of the list-style-position property to set the position of the list item markers for an unordered list (<ul>) and an ordered list (<ol>):

<!DOCTYPE html>
<html>
<head>
  <title>list-style-position Property Example</title>
  <style>
    ul {
      list-style-position: inside;
    }

    ol {
      list-style-position: outside;
    }
  </style>
</head>
<body>
  <h1>list-style-position Property Example</h1>
  <h2>Unordered List</h2>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
  <h2>Ordered List</h2>
  <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ol>
</body>
</html>

Explanation:

1-In this example, the CSS code within the <style> tags demonstrates the use of the list-style-position property to set the position of the list item markers:

ul:

list-style-position: inside; sets the list item markers to be positioned inside the content area of the unordered list (<ul>).

ol:

list-style-position: outside; sets the list item markers to be positioned outside the content area of the ordered list (<ol>).

2-When you open this HTML file in a web browser, you will see the unordered list (<ul>) displayed with the list item markers positioned inside the content area, and the ordered list (<ol>) displayed with the list item markers positioned outside the content area.

list-style-type:complete code in html

Here’s a complete HTML code example that demonstrates the use of the list-style-type property to set the type of marker for list items in an unordered list (<ul>) and an ordered list (<ol>):

<!DOCTYPE html>
<html>
<head>
  <title>list-style-type Property Example</title>
  <style>
    ul {
      list-style-type: circle;
    }

    ol {
      list-style-type: upper-alpha;
    }
  </style>
</head>
<body>
  <h1>list-style-type Property Example</h1>
  <h2>Unordered List</h2>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
  <h2>Ordered List</h2>
  <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ol>
</body>
</html>

Explanation:

1-In this example, the CSS code within the <style> tags demonstrates the use of the list-style-type property to set the type of marker for list items:

ul:

list-style-type: circle; sets the list item markers to be displayed as circle shapes for the unordered list (<ul>).

ol:

list-style-type: upper-alpha; sets the list item markers to be displayed as uppercase alphabetical characters (A, B, C, …) for the ordered list (<ol>).

2-When you open this HTML file in a web browser, you will see the unordered list (<ul>) displayed with circle markers, and the ordered list (<ol>) displayed with uppercase alphabetical markers.

Position The List Item Markers:

Here’s a complete HTML code example that demonstrates the use of the list-style-position property to position the list item markers inside the content area of an unordered list (<ul>):

<!DOCTYPE html>
<html>
<head>
  <title>Position List Item Markers Example</title>
  <style>
    ul {
      list-style-position: inside;
    }
  </style>
</head>
<body>
  <h1>My Position List Item Markers Example</h1>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
</body>
</html>

Explanation:

1-In this example, the CSS code within the <style> tags sets the list-style-position property of the <ul> element to inside.

2-This positions the list item markers inside the content area of each list item.

3-When you open this HTML file in a web browser, you will see the unordered list displayed as follows:

The list item markers (default bullets) will be positioned inside the content area of each list item, appearing before the text.

How To Remove Default Settings of CSS List?

Here’s a complete HTML code example that demonstrates how to remove default settings for lists, such as default margins and padding:

<!DOCTYPE html>
<html>
<head>
  <title>Remove Default Settings Example</title>
  <style>
    ul, ol {
      margin: 0;
      padding: 0;
      list-style: none;
    }
  </style>
</head>
<body>
  <h1>My Remove Default Settings Example</h1>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
  <ol>
    <li>List item A</li>
    <li>List item B</li>
    <li>List item C</li>
  </ol>
</body>
</html>

Explanation:

1-In this example, the CSS code within the <style> tags sets the following properties for both <ul> and <ol> elements:

margin: 0; removes the default margin.
padding: 0; removes the default padding.
list-style: none; removes the default list item markers (such as bullets or numbers).

2-When you open this HTML file in a web browser, you will see both the unordered list (<ul>) and ordered list (<ol>) displayed without any default margins, padding, or markers.

List – Shorthand property:complete code in html

Here’s a complete HTML code example that demonstrates the use of the shorthand list-style property to set multiple list-related properties for an unordered list (<ul>) and an ordered list (<ol>):

<!DOCTYPE html>
<html>
<head>
  <title>List Shorthand Property Example</title>
  <style>
    ul {
      list-style: disc inside;
    }

    ol {
      list-style: decimal-leading-zero outside;
    }
  </style>
</head>
<body>
  <h1>My List Shorthand Property Example</h1>
  <h2>Unordered List</h2>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
  <h2>Ordered List</h2>
  <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ol>
</body>
</html>

Explanation:

1-In this example, the CSS code within the <style> tags demonstrates the use of the list-style shorthand property to set multiple list-related properties for the <ul> and <ol> elements:

ul:

list-style: disc inside; sets the list item marker to a disc shape (disc) and positions it inside the content area (inside).

ol:

list-style: decimal-leading-zero outside; sets the list item marker to decimal numbers with leading zeros (decimal-leading-zero) and positions it outside the content area (outside).

2-When you open this HTML file in a web browser, you will see the unordered list (<ul>) displayed with disc markers positioned inside the content area, and the ordered list (<ol>) displayed with decimal numbers with leading zeros as markers positioned outside the content area.

Styling CSS List With Colors:

Here’s a complete HTML code example that demonstrates how to style a list with colors for an unordered list (<ul>) and an ordered list (<ol>):

<!DOCTYPE html>
<html>
<head>
  <title>Styling List with Colors Example</title>
  <style>
    ul {
      list-style-type: disc;
    }

    ul li {
      color: blue;
    }

    ol {
      list-style-type: decimal;
    }

    ol li {
      color: red;
    }
  </style>
</head>
<body>
  <h1>My Styling List with Colors Example</h1>
  <h2>Unordered List</h2>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
  <h2>Ordered List</h2>
  <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ol>
</body>
</html>

Explanation:

1-In this example, the CSS code within the <style> tags demonstrates how to style a list with different colors:

ul:

list-style-type: disc; sets the list item marker to a disc shape for the unordered list (<ul>).

ul li:

color: blue; sets the color of the text for each list item in the unordered list to blue.

ol:

list-style-type: decimal; sets the list item marker to decimal numbers for the ordered list (<ol>).

ol li:

color: red; sets the color of the text for each list item in the ordered list to red.

2-When you open this HTML file in a web browser, you will see the unordered list displayed with blue text and disc markers, and the ordered list displayed with red text and decimal number markers.

Explanation:

1-In this example, the CSS code within the <style> tags demonstrates how to create a customized list with a red left border:

ul:

list-style-type: none; removes the default bullet point markers for the unordered list (<ul>).

padding: 0; removes the default padding.

ul li:

border-left: 4px solid red; adds a red left border with a width of 4 pixels to each list item in the unordered list.

padding-left: 10px; adds left padding of 10 pixels to provide some spacing between the border and the list item text.

margin-bottom: 10px; adds bottom margin of 10 pixels to create vertical spacing between list items.

ol:

list-style-type: none; removes the default numerical markers for the ordered list (<ol>).

padding: 0; removes the default padding.

ol li:

border-left: 4px solid red; adds a red left border with a width of 4 pixels to each list item in the ordered list.

padding-left: 10px; adds left padding of 10 pixels to provide some spacing between the border and the list item text.

margin-bottom: 10px; adds bottom margin of 10 pixels to create vertical spacing between list items.

2-When you open this HTML file in a web browser, you will see the customized unordered and ordered lists with a red left border applied to each list item.

Full-width bordered list:

Here’s a complete HTML code example that demonstrates how to create a full-width bordered list with a red border for an unordered list (<ul>) and an ordered list (<ol>):

<!DOCTYPE html>
<html>
<head>
  <title>Full-width Bordered List Example</title>
  <style>
    ul {
      list-style-type: none;
      padding: 0;
      margin: 0;
    }

    ul li {
      border: 1px solid red;
      margin-bottom: 10px;
      padding: 10px;
    }

    ol {
      list-style-type: none;
      padding: 0;
      margin: 0;
    }

    ol li {
      border: 1px solid red;
      margin-bottom: 10px;
      padding: 10px;
    }
  </style>
</head>
<body>
  <h1>My Full-width Bordered List Example</h1>
  <h2>Unordered List</h2>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
  <h2>Ordered List</h2>
  <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ol>
</body>
</html>

Explanation:

1-In this example, the CSS code within the <style> tags demonstrates how to create a full-width bordered list:

ul:

list-style-type: none; removes the default bullet point markers for the unordered list (<ul>).

padding:0; removes the default padding.

margin: 0; removes the default margin.

ul li:

border: 1px solid red; adds a red border with a width of 1 pixel to each list item in the unordered list.

margin-bottom: 10px; adds bottom margin of 10 pixels to create vertical spacing between list items.

padding: 10px; adds padding of 10 pixels to provide some spacing between the border and the list item content.

ol:

list-style-type: none; removes the default numerical markers for the ordered list (<ol>).

padding: 0; removes the default padding.

margin: 0; removes the default margin.

ol li:

border: 1px solid red; adds a red border with a width of 1 pixel to each list item in the ordered list.

margin-bottom: 10px; adds bottom margin of 10 pixels to create vertical spacing between list items.

padding: 10px; adds padding of 10 pixels to provide some spacing between the border and the list item content.

When you open this HTML file in a web browser, you will see the unordered and ordered lists displayed with a full-width red border applied to each list item, creating a bordered effect.

All the different list-item markers for lists:

Here’s a complete HTML code example that demonstrates all the different list-item markers for an unordered list (<ul>) and an ordered list (<ol>):

<!DOCTYPE html>
<html>
<head>
  <title>All List Item Markers Example</title>
  <style>
    ul {
      list-style-type: none;
      padding: 0;
      margin: 0;
    }

    ul li.disc:before {
      content: "\2022";
      margin-right: 5px;
    }

    ul li.circle:before {
      content: "\25E6";
      margin-right: 5px;
    }

    ul li.square:before {
      content: "\25A0";
      margin-right: 5px;
    }

    ol {
      list-style-type: none;
      padding: 0;
      margin: 0;
    }

    ol li.decimal:before {
      content: counter(li) ".";
      counter-increment: li;
      margin-right: 5px;
    }

    ol li.decimal-leading-zero:before {
      content: counter(li, decimal-leading-zero) ".";
      counter-increment: li;
      margin-right: 5px;
    }

    ol li.lower-roman:before {
      content: lower-roman(counter(li));
      counter-increment: li;
      margin-right: 5px;
    }

    ol li.upper-roman:before {
      content: upper-roman(counter(li));
      counter-increment: li;
      margin-right: 5px;
    }

    ol li.lower-alpha:before {
      content: lower-alpha(counter(li));
      counter-increment: li;
      margin-right: 5px;
    }

    ol li.upper-alpha:before {
      content: upper-alpha(counter(li));
      counter-increment: li;
      margin-right: 5px;
    }
  </style>
</head>
<body>
  <h1>All List Item Markers Example</h1>
  <h2>Unordered List</h2>
  <ul>
    <li class="disc">List item with disc marker</li>
    <li class="circle">List item with circle marker</li>
    <li class="square">List item with square marker</li>
  </ul>
  <h2>Ordered List</h2>
  <ol>
    <li class="decimal">List item with decimal marker</li>
    <li class="decimal-leading-zero">List item with decimal-leading-zero marker</li>
    <li class="lower-roman">List item with lower-roman marker</li>
    <li class="upper-roman">List item with upper-roman marker</li>
    <li class="lower-alpha">List item with lower-alpha marker</li>
    <li class="upper-alpha">List item with upper-alpha marker</li>
  </ol>
</body>
</html>

Explanation:

1-In this example, the CSS code within the <style> tags demonstrates different list-item markers for an unordered list (<ul>) and an ordered list (<ol>):

ul:

list-style-type: none; removes the default list item markers for the unordered list.

padding: 0; removes the default padding.

margin: 0; removes the default margin.

ul li.disc:before:

content: “\2022”; sets the content of the ::before pseudo-element to a filled disc character.

margin-right: 5px; adds right margin to create spacing between the marker and the list item text.

ul li.circle:before:

content: “\25E6”; sets the content of the ::before pseudo-element to a hollow circle character.

margin-right: 5px; adds right margin to create spacing between the marker and the list item text.

ul li.square:before:

content: “\25A0”; sets the content of the ::before pseudo-element to a square character.

margin-right: 5px; adds right margin to create spacing between the marker and the list item text.

ol:

list-style-type: none; removes the default list item markers for the ordered list.

padding: 0; removes the default padding.

margin: 0; removes the default margin.

ol li.decimal:before:

content: counter(li) “.”; sets the content of the ::before pseudo-element to the value of the li counter followed by a period.

counter-increment: li; increments the li counter for each list item.