Chapter 16.CSS: Styling Lists

list-style-type

Unordered List Marker

Original

disc

circle

square

Ordered List Marker

Original

  1. xxxxxxxxxxxxxxx
  2. xxxxxxxxxxxxxxx
  3. xxxxxxxxxxxxxxx

decimal

  1. xxxxxxxxxxxxxxx
  2. xxxxxxxxxxxxxxx
  3. xxxxxxxxxxxxxxx

decimal-leading-zero

  1. xxxxxxxxxxxxxxx
  2. xxxxxxxxxxxxxxx
  3. xxxxxxxxxxxxxxx

lower-alpha

  1. xxxxxxxxxxxxxxx
  2. xxxxxxxxxxxxxxx
  3. xxxxxxxxxxxxxxx

upper-alpha

  1. xxxxxxxxxxxxxxx
  2. xxxxxxxxxxxxxxx
  3. xxxxxxxxxxxxxxx

lower-roman

  1. xxxxxxxxxxxxxxx
  2. xxxxxxxxxxxxxxx
  3. xxxxxxxxxxxxxxx

upper-roman

  1. xxxxxxxxxxxxxxx
  2. xxxxxxxxxxxxxxx
  3. xxxxxxxxxxxxxxx

lower-greek

  1. xxxxxxxxxxxxxxx
  2. xxxxxxxxxxxxxxx
  3. xxxxxxxxxxxxxxx

upper-greek

  1. xxxxxxxxxxxxxxx
  2. xxxxxxxxxxxxxxx
  3. xxxxxxxxxxxxxxx

lower-latin

  1. xxxxxxxxxxxxxxx
  2. xxxxxxxxxxxxxxx
  3. xxxxxxxxxxxxxxx

upper-latin

  1. xxxxxxxxxxxxxxx
  2. xxxxxxxxxxxxxxx
  3. xxxxxxxxxxxxxxx

georgian

  1. xxxxxxxxxxxxxxx
  2. xxxxxxxxxxxxxxx
  3. xxxxxxxxxxxxxxx

hebrew

  1. xxxxxxxxxxxxxxx
  2. xxxxxxxxxxxxxxx
  3. xxxxxxxxxxxxxxx

cjk-ideographic

  1. xxxxxxxxxxxxxxx
  2. xxxxxxxxxxxxxxx
  3. xxxxxxxxxxxxxxx

hiragana

  1. xxxxxxxxxxxxxxx
  2. xxxxxxxxxxxxxxx
  3. xxxxxxxxxxxxxxx

katakana

  1. xxxxxxxxxxxxxxx
  2. xxxxxxxxxxxxxxx
  3. xxxxxxxxxxxxxxx

korean-hangul-formal

  1. xxxxxxxxxxxxxxx
  2. xxxxxxxxxxxxxxx
  3. xxxxxxxxxxxxxxx

No Marker

none

  1. xxxxxxxxxxxxxxx
  2. xxxxxxxxxxxxxxx
  3. xxxxxxxxxxxxxxx

list-style-image

list-style-image with different image size

image 16px x 16px

  1. xxxxxxxxxxxxxxx
  2. xxxxxxxxxxxxxxx
  3. xxxxxxxxxxxxxxx

image 30px x 30px

  1. xxxxxxxxxxxxxxx
  2. xxxxxxxxxxxxxxx
  3. xxxxxxxxxxxxxxx

Icon marker using background image

Before size adjusted

list-style-position

Original

Original

Original

Back