980px
1
2
3
4
5
6
<h2>Ordered List</h2>
<ol>
<li>Number One</li>
<li>Number Two</li>
<li>Number Three</li>
</ol>

Where <ol> is the tag for an ordered list and <li> is the tag for the list item inside of the ordered list.

2. Unordered Lists

The default type of an unordered list is to create a solid round shaped bullet for the list items—eventually you will see how to change the appearance of, hide or create your own image for the bullet using style sheets.

Select Code
1
2
3
4
5
6
<h2>Unordered List</h2>
<ul>
<li>Bullet Two</li>
<li>Bullet Three</li>
<li>Bullet Four</li>
</ul>

Where <ul> is the tag to create an unordered list and (again) the <li> tag is the list item inside the unordered list.

3. Definition Lists

A definition list is a list of items, with a description of each item.

Select Code
1
2
3
4
5
6
7
8
9
<h2>Definition List</h2>
<dl>
<dt>Item Definition One</dt>
<dd>Item Description One</dd>
<dt>Item Definition Two</dt>
<dd>Item Description Two</dd>
<dt>Item Definition Three</dt>
<dd>Item Description Three</dd>
</dl>

Styling List Items

There are several ways that we can customize our list items for our pages.

For example, to replace the default bullet with an image we can use the list-style property:

Select Code
1
2
3
4
#content ul li {
list-style: none;
list-style-image: url(images/bg-listitem-bullet.png);
}

See Also: Styling Lists | W3 Schools

This portion of the Premium Design Works website is written by Mike Sinkula for the Web Design & Development students at Seattle Central College and the Human Centered Design & Engineering students at the University of Washington.

Leave a Comment:

Don't forget to get your Globally Recognized Avatar.

css.php