Languages
[Edit]
EN

CSS - ordered list style types

6 points
Created by:
Ela-Davey
243

In this article, we would like to show you ordered list style types using pure CSS.

list-style-type: decimal;

list-style-type: decimal-leading-zero;

list-style-type: lower-roman;

list-style-type: upper-roman;

list-style-type: lower-greek;

list-style-type: lower-latin;

list-style-type: upper-latin;

list-style-type: armenian;

list-style-type: georgian;

list-style-type: lower-alpha;

list-style-type: upper-alpha;

 

Practical example

In this section, we present runnable example with some of the most common unordered list style types (list-style-type property).

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>
    
    body {
        font-size: 20px;
        color: #1d6ab3;
        display: flex;
      	flex-wrap: wrap;
    }
    
    body > div {
     	min-width: 220px; 
    }
    
  </style>  
</head>
<body>

  <div>
    <div>decimal</div>
    <ol style="list-style-type: decimal">
      <li>item</li><li>item</li><li>item</li>
    </ol>
  </div>

  <div>
    <div>decimal-leading-zero</div>
    <ol style="list-style-type: decimal-leading-zero">
      <li>item</li><li>item</li><li>item</li>
    </ol>
  </div>

  <div>
    <div>lower-roman</div>
    <ol style="list-style-type: lower-roman">
      <li>item</li><li>item</li><li>item</li>
    </ol>
  </div>

  <div>
    <div>upper-roman</div>
    <ol style="list-style-type: upper-roman">
      <li>item</li><li>item</li><li>item</li>
    </ol>
  </div>

  <div>
    <div>lower-greek</div>
    <ol style="list-style-type: lower-greek">
      <li>item</li><li>item</li><li>item</li>
    </ol>
  </div>

  <div>
    <div>lower-latin</div>
    <ol style="list-style-type: lower-latin">
      <li>item</li><li>item</li><li>item</li>
    </ol>
  </div>

  <div>
    <div>upper-latin</div>
    <ol style="list-style-type: upper-latin">
      <li>item</li><li>item</li><li>item</li>
    </ol>
  </div>

  <div>
    <div>armenian</div>
    <ol style="list-style-type: armenian">
      <li>item</li><li>item</li><li>item</li>
    </ol>
  </div>

  <div>
    <div>georgian</div>
    <ol style="list-style-type: georgian">
      <li>item</li><li>item</li><li>item</li>
    </ol>
  </div>

  <div>
    <div>lower-alpha</div>
    <ol style="list-style-type: lower-alpha">
      <li>item</li><li>item</li><li>item</li>
    </ol>
  </div>

  <div>
    <div>upper-alpha</div>
    <ol style="list-style-type: upper-alpha">
      <li>item</li><li>item</li><li>item</li>
    </ol>
  </div>

</body>
</html>
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join