Working with lists in Css

Unordered lists

The unordered list, commonly referred to as a bullet point list, is the most frequently seen
type of list online. The list is composed of an unordered list element (<ul></ul>) and any
number of list items within, each of which looks like this (prior to content being added):
<li></li>. An example of an unordered list follows, and the resulting browser display is
shown to the right. As you can see, browsers typically render a single-level unordered list
with solid black bullet points.
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item 'n'</li>
</ul>

**Note : Unlike HTML, XHTML lists require end tags on all list elements. In
HTML, the </li> end tag was optional.

Ordered lists

On occasion, list items must be stated in order, whereupon an ordered list is used. It works
in the same way as an unordered list, the only difference being the containing element,
which is <ol></ol>.
<ol>
<li>List item one</li>
<li>List item two</li>
<li>List item 'n'</li>
</ol>

Definition lists

A definition list isn’t a straightforward list of items. Instead, it’s a list of terms and explanations.
This type of list isn’t common online, but it has its uses. The list itself is enclosed in
the definition list element (<dl></dl>), and within the element are placed terms and definitions,
marked up with <dt></dt> and <dd></dd>, respectively. Generally speaking,
browsers display the definition with an indented left-hand margin, as in the following
example.

**Note :Web browsers automatically insert the item numbers when you use ordered lists. The
only way of controlling numbering directly is via the start attribute, whose value dictates
the first number of the ordered list. Note, though, that this attribute is deprecated—
use it and your web page will not validate as XHTML Strict.

Unlike HTML, XHTML lists require end tags on all list elements. In
HTML, the </li> end tag was optional.
<dl>
<dt>Cat</dt>
<dd>Four-legged, hairy animal, with an

-> inflated sense of self-importance</dd>
<dt>Dog</dt>
<dd>Four-legged, hairy animal, often with-> an inferiority complex</dd>
</dl>

Nesting lists
Lists can be nested, but designers often do so incorrectly, screwing up their layouts and
rendering web pages invalid. The most common mistake is placing the nested list outside
any list items, as shown in the following incorrect example:
<ul>
<li>List item one</li>
<ul>
<li>Nested list item one</li>
<li>Nested list item two</li>
</ul>
<li>List item two</li>
<li>List item 'n'</li>
</ul>
Nested lists must be placed inside a list item, after the relevant item that leads into the
nested list. Here’s an example:
<ul>
<li>List item one
<ul>
<li>Nested list item one</li>
<li>Nested list item two</li>
</ul>
</li>
<li>List item two</li>
<li>List item 'n'</li>
</ul>
Always ensure that the list element that contains the nested list is closed with an end tag.
Not doing so is another common mistake, and although it’s not likely to cause as many
problems as the incorrect positioning of the list, it can still affect your layout.