Ordered Lists

Ordered lists are a traditional way to store information on multiple things, but keeping them in an order.

Key Points

Displays a list of items in numerical order (1, 2, 3, 4, etc).

To create an ordered list you need to use the <ol> and </ol> tags.

Each item on your list needs to be stored in <li> and </li> tags.

  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4

Adding an Ordered List

To add an ordered list to your page you must first create the list by opening your list with an <ol> tag and closing your list with the </ol> tag.

Inside of these tags, you can then create each list item by opening the <li> tag and closing it with the </li> tag.

You can create as many List Items as you need.

<ol>
    <li>This is list item 1</li>
    <li>This is list item 2</li>
    <li>This is list item 3</li>
    <li>This is list item 4</li>
</ol>

Styling an Ordered List

When styling an ordered list, it is important to decide if you’re styling the whole list or individual list items.

Add style to the whole list

ol{
    color: pink;
    background-color: black;
    font-size: 30px; 
    font-family: "Times New Roman"; 
    text-align: center;
}

Add style to the list items

li{
    color: pink;
    background-color: black;
    font-size: 30px; 
    font-family: "Times New Roman"; 
    text-align: center;
}

National 5 Targets

You should be able to implement an ordered list into a web page.

You should also be able to style the whole list or individual list items.