Ordered lists

CSS Home | Ordered Lists | Unordered Lists | Quotes / Indents | Call out boxes | Buttons

To apply a style simply add a parameter to the <OL> tag

e.g. ol class=”counter1″, “counter2”

Default style

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  2. Sed sollicitudin ipsum a enim vehicula ultrices.
  3. Morbi in tellus ornare, vestibulum elit vitae, consectetur nisl

Curabitur in placerat massa. Duis at volutpat dolor, eu facilisis nunc. Aenean sit amet pulvinar felis. Pellentesque eu justo ornare, lobortis mi nec, molestie erat. Pellentesque at dolor id dolor sollicitudin malesuada a nec magna. Duis sodales dolor et dui mollis, sed efficitur nulla pretium.

With style counter1 – ol class=”counter1″

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  2. Sed sollicitudin ipsum a enim vehicula ultrices.
  3. Morbi in tellus ornare, vestibulum elit vitae, consectetur nisl

Curabitur in placerat massa. Duis at volutpat dolor, eu facilisis nunc. Aenean sit amet pulvinar felis. Pellentesque eu justo ornare, lobortis mi nec, molestie erat. Pellentesque at dolor id dolor sollicitudin malesuada a nec magna. Duis sodales dolor et dui mollis, sed efficitur nulla pretium.

 

With style counter2

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  2. Sed sollicitudin ipsum a enim vehicula ultrices.
  3. Morbi in tellus ornare, vestibulum elit vitae, consectetur nisl

Orange circles list

  1. Morbi varius nisl quis lorem auctor, sed vestibulum tortor tempus.
  2. Morbi placerat justo et elit elementum placerat.
  3. Nunc placerat purus id maximus placerat.
  4. Curabitur sit amet dolor vitae nisl suscipit imperdiet.

Green circles list

  1. Morbi varius nisl quis lorem auctor, sed vestibulum tortor tempus.
  2. Morbi placerat justo et elit elementum placerat.
  3. Nunc placerat purus id maximus placerat.
  4. Curabitur sit amet dolor vitae nisl suscipit imperdiet.

Blue circles list

  1. Morbi varius nisl quis lorem auctor, sed vestibulum tortor tempus.
  2. Morbi placerat justo et elit elementum placerat.
  3. Nunc placerat purus id maximus placerat.
  4. Curabitur sit amet dolor vitae nisl suscipit imperdiet.