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;
}


Comments :

Post a Comment