List Styles

Lists come in three flavors: unordered, ordered, and the definition list. As I show below, you can add multiple classes to combine styles to one list.

Unordered Lists

Note the presence of bullets (or lack of), and the left margin and list-item padding.

Generic


<ul>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
</ul>
  • List Item 1
  • List Item 2
  • List Item 3

Padded list items


<ul class="padded">
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
</ul>
  • List Item 1
  • List Item 2
  • List Item 3

Plain unordered list


<ul class="plain">
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
</ul>
  • List Item 1
  • List Item 2
  • List Item 3

Plain unordered, padded List


<ul class="plain padded">
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
</ul>
  • List Item 1
  • List Item 2
  • List Item 3

Index list

A bulletless list with a larger font and increased padding.


<ul class="indexlist">
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
</ul>
  • List Item 1
  • List Item 2
  • List Item 3

Links list


<ul class="links">
    <li class="first">List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
</ul>
  • List Item 1
  • List Item 2
  • List Item 3

RSS feed list


<ul class="feeds">
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
</ul>
  • List Item 1
  • List Item 2
  • List Item 3

Ordered Lists

Generic


<ol>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
</ol>
  1. List Item 1
  2. List Item 2
  3. List Item 3

Padded list items


<ol class="padded">
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
</ol>
  1. List Item 1
  2. List Item 2
  3. List Item 3

Definition Lists

Generic


<dl>
    <dt>List Item 1</dt>
    <dd>This is definition 1</dd>
    <dt>List Item 1</dt>
    <dd>This is definition 2</dd>
    <dt>List Item 1</dt>
    <dd>This is definition 3</dd>
</dl>
List Item 1
This is definition 1
List Item 2
This is definition 2
List Item 3
This is definition 3

Large title, small definition


<dl class="largetitle">
    <dt>List Item 1</dt>
    <dd>This is definition 1</dd>
    <dt>List Item 2</dt>
    <dd>This is definition 2</dd>
    <dt>List Item 3</dt>
    <dd>This is definition 3</dd>
</dl>
List Item 1
This is definition 1
List Item 2
This is definition 2
List Item 3
This is definition 3