Styling Lists

CSS Styling Lists

CSS can change the markers, spacing, position, and overall appearance of ordered and unordered lists. List styles can range from simple changes to bullets and numbers to customized markers that match the design of a web page.

Basic List Styling

HTML lists have browser default styles that normally include indentation and a marker before each list item. CSS can change these defaults while keeping the list structure in the HTML.

ul {
  list-style-type: square;
}

li {
  margin-bottom: 8px;
}

Styling Unordered Lists

Unordered lists use markers such as discs, circles, or squares. The marker style can be changed with the list-style-type property.

ul {
  list-style-type: square;
}

Other common values for unordered lists include disc, circle, and none.

Styling Ordered Lists

Ordered lists normally display decimal numbers, but CSS can change the numbering style without changing the HTML list structure.

ol {
  list-style-type: upper-roman;
}

Depending on the type of numbering needed, values include decimal, decimal-leading-zero, lower-alpha, upper-alpha, lower-roman, and upper-roman.

The list-style-type Property

The list-style-type property specifies the type of marker displayed for list items.

ul {
  list-style-type: circle;
}

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

The appropriate values depend on whether the list is ordered or unordered and the type of marker the design requires.

The list-style-position Property

The list-style-position property controls whether a list marker appears outside or inside the list item's principal block box.

ul {
  list-style-position: inside;
}

The default value is outside. With outside, the marker is positioned outside the main content box. With inside, the marker becomes part of the list item's inline content, which also affects how wrapped lines align.

The list-style-image Property

The list-style-image property can use an image as the marker for list items.

ul {
  list-style-image: url("marker.png");
}

Although this property can create image markers, the ::marker pseudo-element or other CSS techniques often provide more control over marker appearance.

The list-style Shorthand

The list-style shorthand property can set the list marker type, position, and image in a single declaration.

ul {
  list-style: square inside;
}

Using the shorthand can keep simple list styling compact when several list-style properties are being set together.

List Spacing

Margins and padding can control the spacing around a list and between individual list items.

ul {
  padding-left: 30px;
}

li {
  margin-bottom: 8px;
}

The list's left padding commonly provides room for markers positioned outside the list items, while margins on the <li> elements can add vertical space between items.

Styling Markers with ::marker

The ::marker pseudo-element selects the marker box of a list item, allowing certain properties of bullets and numbering to be styled independently from the list item text.

li::marker {
  color: #0088cc;
  font-weight: bold;
}

The properties supported by ::marker are more limited than those available for ordinary elements, but it provides a convenient way to customize common marker characteristics such as color.

Removing List Markers

Setting list-style-type to none removes the visible list markers. Default padding and margins can also be removed when a design does not need the browser's normal list indentation.

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

This technique is commonly used when a semantic list is styled for navigation or another interface where ordinary bullet markers are not appropriate.

Try Styling Lists

Edit the CSS in the example to change the marker type, marker color, indentation, and spacing between list items. Compare the ordered and unordered lists to see how the same CSS concepts apply to different list types.

Summary

CSS provides several ways to control the appearance of HTML lists. The list-style-type, list-style-position, list-style-image, and list-style properties control list markers, while margins and padding control spacing. The ::marker pseudo-element provides additional control over the appearance of bullets and numbering.

The next tutorial covers Styling Images and explains how CSS can control image size, borders, spacing, alignment, and other presentation.