Styling Lists

Take a look at the source code to see how the list is structured in HTML.

Learn more about Lists


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non turpis et libero facilisis placerat et sed ex. Morbi tincidunt ante id molestie imperdiet. Curabitur bibendum lacus ac justo sodales, non varius quam commodo. Nullam dictum consectetur massa, eu mollis lorem. Sed finibus, risus ut fringilla vulputate, sem libero aliquet odio, non rutrum purus sem eget mauris. Mauris quam erat, imperdiet id feugiat ut, tristique sit amet lorem. Cras vitae tortor velit. Donec a sapien a metus consequat sollicitudin. Nulla venenatis laoreet eros sed mattis.

Unordered List:

Note how the external stylesheet affects the list below:

Ut mauris dui, gravida sit amet molestie et, lobortis sed nunc. Aenean eleifend lacinia consequat. Sed vehicula tempor hendrerit. Nulla consequat ipsum id rutrum efficitur. Mauris non mauris sit amet odio pretium pharetra. Phasellus nec maximus dolor, vel scelerisque elit. Duis egestas tellus non ligula interdum egestas. In sit amet erat facilisis, maximus lacus eget, maximus risus. Nullam nec tortor tempus diam blandit porttitor ac eget quam. Curabitur augue leo, placerat ut nunc at, hendrerit pharetra orci. Ut ut pretium mauris, id ullamcorper neque. Vivamus tortor ipsum, vulputate quis lobortis ac, tincidunt eget elit.

Ordered List (it automatically assigns numbers to the items):

Note how these three lists are contained in a DIV with a "float-left" class to keep them side by side. Also note how the "type" attribute inside each ordered list affects it:

  1. List Item
  2. List Item
    1. sub-bullet
    2. sub-bullet
  3. List Item
  4. List Item
  1. List Item
  2. List Item
  3. List Item
    1. sub-bullet
    2. sub-bullet
  4. List Item
  1. List Item
    1. sub-bullet
    2. sub-bullet
  2. List Item
  3. List Item
  4. List Item

Aenean augue enim, blandit a lacinia a, pretium id magna. Donec consectetur elit ultricies neque finibus efficitur. Curabitur at tincidunt leo. In hac habitasse platea dictumst.

Curabitur vestibulum a quam vel tempor. Suspendisse non nisi rutrum, auctor eros quis, scelerisque diam. Ut varius elit et pharetra bibendum.