List Item Number Style Demo

Normally, when we declare an ordered list in HTML, the list item numbers are the same color as the list item text they precede. But this doesn't always have to be the case, at least not in modern browsers.

With CSS, we can do a lot more formatting of the list item numbers than we can do for the list item bullets in unordered lists (see the demo for that).

Consider for example the list of musical instruments in the General MIDI standard.

  1. Acoustic grand piano
  2. Bright acoustic piano
  3. Electric grand piano
  4. Honky-tonk piano
  5. Electric piano 1
  6. Electric piano 2
  7. Harpsichord
  8. Clavinet
  9. etc.

Back to index