CSS online training course

CSS lesson 11, Lists


HTML knows three kinds of lists :

The numbered list (ol), divided into list items (Ii);
The unnumbered list (ul), divided into list items (li);
The definition list (dl), divided into pares of definition terms (dt) and definition descriptions (dd);
By taking a list in a li or dd from another list a nested list will appear.
In a stylesheet you can change the appearence of a list.
The property list-style influences the bullet points.

Ordered list

We also have the ordered list (ol).
This list is ordered so it will put numbers infront of the list items.
The startingtag is <ol> and the endtag is </ol>.

A list consists out of list items with a startingtag <li> and closes with </li>

Unordered list

ul stands for unordered list. The startingtag is <ul>. li starts a new item every time.

<li>Topic 1</li>
<li>Topic 2</li>
<li>Topic 3</li>
<li>Topic 4</li>
<li>Topic 5</li>

The result will look like this :

  • Topic 1
  • Topic 2
  • Topic 3
  • Topic 4
  • Topic 5

These are the values which can be used to make a unordened list :
  • disc
  • square
  • circle
  • none

For example:
Li { List-style-type:circle;}

When you dont want a circle or square to appear infront of the item just use :
Li { List-style-type:None}

When we are using the list code <ul> and <li> we can make very simple or complicated menus. We will show you a horzontal and vertical menu.

Horizontal or vertical

Below we will show you a example of how to make a simple menu.

HTML code example :

<div id="menu">
<li><a href="topic1.html">topic1</a></li>
<li><a href="topic2.html">topic2</a></li>
<li><a href="topic3.html">topic3</a></li>
<li><a href="topic4.html">topic4</a></li>

This would be the result :

If you leave out the display:inline the menu will become vertical :

The text-aligh makes sure that the text on the button is in the center of the box.
list-style-type: none; removes the bullets that would normally appear.
display: inline; makes the items to appear horizontally instead of vertically.