Customize your lists

You need to create an ordered or unordered list and you are tired of seeing the same old list characters like the ones below.

  • line one
  • line two
  • line three
  1. line one
  2. line two
  3. line three

How can you customize your lists?

Apply list styles like these:

  • circle
  • square
  1. lower alpha character
  1. upper alpha character
  1. leading-zero
  1. lower roman numeral
  1. upper roman numeral

by doing this:

<ul class=”circle”>
<li>circle</li>
</ul>

<ul class=”square”>
<li>square</li>
</ul>

<ol class=”lower-alpha”>
<li>lower alpha character</li>
</ol>

<ol class=”upper-alpha”>
<li>upper alpha character</li>
</ol>

<ol class=”decimal-leading-zero”>
<li>decimal leading zero</li>
</ol>

<ol class=”lower-roman”>
<li>lower roman numeral</li>
</ol>

<ol class=”upper-roman”>
<li>upper roman numeral</li>
</ol>