Styling Lists Using CSS

Since lists are text elements, you can style them the way you style a paragraph or heading, with a customized font-family, font-size, font-weight, color, and margins.

images/articles/css/css23.webp

By default, browsers don't add any space between list items. You can separate them as,

li {
 margin: .75em;
}

Styling List Markers

Markers are the bullets in an unordered list or the numbers in an ordered list. If you don't specify what kind of bullets you want in an unordered list, the browser displays a disc. You can change it to circle or square. For example,

ul {
 list-style-type: square;
}

You can change the bullet type or image using pseudo-classes such as :hover, :visited, and :active.

The default list-style-type for ordered lists is decimal - 1, 2, 3. You can change it to decimal-leading-zero - 01, 02, 03; lower-alpha - a, b, c; upper-alpha - A, B, C; lower-roman - i., ii., iii.; and upper-roman - I, II, III. For example,

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

List Style Types

  • disc
  • circle
  • square
  • decimal
  • decimal-leading-zero
  • upper-roman
  • lower-roman
  • upper-alpha
  • lower-alpha
  • lower-greek

Creating Your Own Bullets

You can also use your own graphics as bullets from GIF, JPEG, and PNG files by applying the list-style-image property.

list-style-image: url(arrow_02.png);

Bullet Positions

Often, the text of a bulleted list item is longer than one line. Using the list-style-position property, you can specify the position of wrapping text in relation to the bullet. Wrapped text that is indented to start below the first letter of the first line of text is called a hanging indent.

  • inside aligns the left edge of the bullet with the left edge of subsequent text.
  • outside left aligns the first line of text with subsequent text, placing the bullet as a hanging indent.