Ol and li The Ordered List element HTML CSS Learning

<ol> <li>Tag The Ordered List element HTML CSS Learning

<ol> Tag Sets the numbering type:

a for lowercase letters

A for uppercase letters

i for lowercase Roman numerals

I for uppercase Roman numerals

1 for numbers (default)

Two different ordered lists the first list starts at 1, and the second starts at 40:

Example

<ol>

  <li>Dog</li>

  <li>Cat</li>

  <li>Bird</li>

</ol>

<ol start="30">

  <li>Dog</li>

  <li>Cat</li>

  <li>Bird</li>

</ol>

Try It

different list types (with CSS):

Example:

<ol style="list-style-type:upper-roman">

<li>Dog</li>

<li>Cat</li>

<li>Bird</li>

</ol>

<ol style="list-style-type:lower-alpha">

<li>Dog</li>

<li>Cat</li>

<li>Bird</li>

</ol>

Try It

Control and expand line-height in lists (with CSS):

<ol style="line-height:70%">

  <li>A</li>

  <li>B</li>

  <li>C</li>

</ol>

<ol style="line-height:140%">

  <li>A</li>

  <li>B</li>

  <li>C</li>

</ol>

Try It

Arrange an unordered list inside an ordered list:

Example:

<ol>

  <li>Dog</li>

  <li>Cat

    <ul>

      <li>Black Cat</li>

      <li>White Cat</li>

    </ul>

  </li>

  <li>Bird</li>

</ol>

Try It

Default <ol> CSS Settings

Example

ol {

  list-style-type: decimal;

  margin-top: 5px;

  margin-bottom: 5px;

  margin-right: 0;

  margin-left: 0;

  padding-left: 30px;

  display: block;

}