CSS Lists

Styling CSS Lists

Customizing the appearance of ordered and unordered lists.

CSS provides properties to control the markers (bullets or numbers) used in HTML lists:

• Change marker types for ordered lists (<ol>).
• Change marker types for unordered lists (<ul>).
• Use custom images as list markers.
• Control marker position (inside/outside).
• Remove markers entirely.

HTML List Basics Review

Remember the two main types of HTML lists:

• Unordered lists (<ul>): List items (<li>) are typically marked with bullets.
• Ordered lists (<ol>): List items (<li>) are typically marked with sequential numbers or letters.

CSS allows you to override these default markers.

Changing List Item Markers (list-style-type)

The list-style-type property specifies the type of marker to use.

Common values for <ul> (unordered lists):

• disc (default): Filled circle.
• circle: Hollow circle.
• square: Filled square.
• none: No marker.

Common values for <ol> (ordered lists):

• decimal (default): Numbers (1, 2, 3…).
• decimal-leading-zero: Numbers with leading zeros (01, 02, 03…).
• lower-roman: Lowercase Roman numerals (i, ii, iii…).
• upper-roman: Uppercase Roman numerals (I, II, III…).
• lower-alpha / lower-latin: Lowercase letters (a, b, c…).
• upper-alpha / upper-latin: Uppercase letters (A, B, C…).

Example:

/* Unordered lists */
.list-circles {
  list-style-type: circle;
}

.list-squares {
  list-style-type: square;
}

/* Ordered lists */
.list-roman {
  list-style-type: upper-roman;
}

.list-alpha {
  list-style-type: lower-alpha;
}

Using an Image as the List Marker (list-style-image)

You can specify an image file to be used as the list marker with the list-style-image property.

ul.custom-marker {
  list-style-image: url('images/custom-bullet.png');
}

Caveats: Precisely controlling the position and alignment of image markers using list-style-image can sometimes be inconsistent across browsers or difficult to fine-tune. The size of the marker is determined by the image itself.

Alternative (More Control): Using Background Images

A more common and flexible technique for custom image markers involves removing the default marker and applying a background image to the <li> element.

This approach gives you full control over the marker’s position, size (via background-size if needed), and spacing using padding.

Example using background image:

ul.background-marker {
  list-style-type: none; /* Remove default marker */
  padding-left: 0; /* Remove default padding often added by browsers */
  margin-left: 0;
}

ul.background-marker li {
  padding-left: 25px; /* Make space for the background image */
  background-image: url('images/custom-bullet.png');
  background-repeat: no-repeat;
  background-position: left center; /* Position image */
  /* background-size: 15px 15px; Optional: control image size */
  margin-bottom: 5px; /* Spacing between list items */
}

Explanation:

• For <ul>: Remove the default marker (list-style-type: none;) and reset browser default indentation (padding-left: 0;).
• For <li>: Add left padding (padding-left) to push the text content over, creating space for the marker.
• Apply the background-image, prevent it from repeating (background-repeat: no-repeat;).
• Position the background image within the padding area (background-position: left center;). Adjust as needed.
• Optionally control the image size using background-size.

List Marker Position (list-style-position)

The list-style-position property specifies whether the list marker appears inside or outside the content flow.

• outside (default): The marker sits to the left of the list item’s text block. Text wrapping aligns under the start of the text.
• inside: The marker is placed inside the list item’s text block, as if it were part of the first line. Text wrapping aligns under the marker.

Example:

ul.inside-marker {
  list-style-position: inside;
  border: 1px solid #ccc; /* To visualize the text block */
  width: 200px;
}

ul.outside-marker {
  list-style-position: outside;
  border: 1px solid #ccc;
  width: 200px;
  margin-top: 10px;
}

The difference is most noticeable with wrapped text.

List Shorthand Property (list-style)

The list-style property is a shorthand for setting list-style-type, list-style-position, and list-style-image in one declaration.

The order of values typically expected is: type position image.

Example:

ul.shorthand-example {
  /* Set type to square, position inside, and specify an image */
  /* The type (square) acts as fallback if image doesn't load */
  list-style: square inside url('images/custom-bullet.png');
}

If any value is omitted, its default will be used (e.g., list-style: circle; implies outside position and none for image).

Common Use: Setting list-style: none; is a frequent way to remove default markers and padding/margin when using custom styling methods (like the background image technique or flexbox/grid for layout).

Summary of CSS List Properties

Property	Description
list-style-type	Specifies the type of marker (disc, circle, square, decimal, etc.).
list-style-image	Specifies an image to use as the list marker.
list-style-position	Specifies if the marker appears inside or outside the content flow.
list-style	Shorthand for setting type, position, and image in one declaration.

Further Reading: MDN Styling Lists