List Functionality

The two types of lists, unordered and ordered, are styled.

• This is the first item of an unordered list.
• This is the second.
• And the third.
• There are also sub-lists.
  • This is a sub-list item.
  • This is another one.
  • Another sub-list.
    • And it keeps going inward.
    • As long as it will fit on the page.
• This is the last item.

1. Ordered lists are a bit different. This is the first item.
2. This is the second.
3. And the third.
4. There are also sub-lists.
   1. This is a sub-list item.
   2. This is another one.
   3. Another sub-list.
      1. And it keeps going inward.
      2. As long as it will fit on the page.
   4. You can even combine different kinds of lists.
      • This is an unordered list item inside an ordered list.
      • This is another
5. This is the last item.

As you can see above, the first items in a list (ordered or unordered) have a different bullet/number style than sub-list items. You can continue to add additional styles to deeper and deeper sub-lists at your leisure.

Also, Internet Explorer 6 has a small issue with certain lists, so check the Internet Explorer 6 Overrides page to understand what needs to be changed for IE 6.

---

Relevant HTML

<ul>
	<li>This is an unordered list item.</li>
	<li>This is the second unordered list item.</li>
	<li>
		Below is a sub-list.
		<ul>
			<li>A sub-list item.</li>
			<li>And another.</li>
		</ul>
	</li>
</ul>

<ol>
	<li>It's the exact same thing with ordered lists, except it's an ol, not ul.</li>
	<li>This is the second ordered list item.</li>
	<li>Etc.</li>
</ol>

Relevant CSS

#content ul
{
	padding:0 0 1em 2em;
	font-size:1em;
	list-style:disc;
}

#content ul ul
{
	padding:0 0 0 2em;
	list-style:square;
}

#content ol
{
	padding:0 0 1em 2em;
	font-size:1em;
}

#content ol ol
{
	padding:0 0 0 2em;
	list-style:lower-roman;
}

#content ul ol
{
	padding:0 0 0 2em;
}

#content ol ul
{
	padding:0 0 0 2em;
}

---

« Back to Functionality Index