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>
- List Item 1
- List Item 2
- 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>
- List Item 1
- List Item 2
- 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
