Open In App

Foundation CSS Base Typography Ordered Lists

Improve
Improve
Like Article
Like
Save
Share
Report

The Foundation CSS framework is a front-end framework that combines HTML and CSS, as well as additional tools, features and controls, to create a flexible design environment. The framework is created by the ZURB foundation in September 2011 that allows you to create stunning responsive websites, applications, and emails that look great on any device. In this article let’s see understand how to create ordered lists. 

An ordered list is a collection of objects in which the order of the contents is important. A number list is another name for an ordered list. In the numbering method, we can use Arabic numbers, roman numerals, or letters to determine the order. The ordered list tag or <ol> is used to make an ordered list.

Foundation CSS Base Typography Ordered Lists Class: No specific class is required for creating an ordered list.

Syntax:

<ol>
    <li> ... </li>
    <li> ... </li>
    ....
</ol>

Example 1: In this example, numbers are used to determine the order.

HTML




<!DOCTYPE html>
  
<html>
  
<head>
    <title>Foundation CSS Base Typography Ordered Lists</title>
    <link rel="stylesheet"
          href=
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <h3>Foundation CSS Base Typography Ordered Lists</h3>
    <ol>
        <li style="color: green" class="subheader">
            Web technologies used in web development:
        </li>
        <ol>
            <li>HTML</li>
            <li>CSS</li>
            <li>JAVASCRIPT</li>
            <li>PHP</li>
            <li>BOOTSTRAP etc...</li>
        </ol>
    </ol>
  
    <script type="text/javascript">
        $(document).foundation();
    </script>
</body>
  
</html>


Output:

Foundation CSS Base Typography Ordered Lists

Foundation CSS Base Typography Ordered Lists

Example 2: In this example, Roman numerals are used to determine the order.

HTML




<!DOCTYPE html>
<html>
<head>
    <title>Foundation CSS Base Typography Ordered Lists</title>
    <link rel="stylesheet" 
          href=
    <script src=
    </script>
    <script src=
    </script>
    
      <!-- Set the type of the ordered list to upper-roman -->
    <style>
        ol {
            list-style-type: upper-roman;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <h3>Foundation CSS Base Typography Ordered Lists</h3>
    <ol>
        <li style="color: green" class="subheader">
            Web technologies used in web development:
        </li>
        <ol>
            <li>HTML</li>
            <li>CSS</li>
            <li>JAVASCRIPT</li>
            <li>PHP</li>
            <li>BOOTSTRAP etc...</li>
        </ol>
    </ol>
  
    <script type="text/javascript">
        $(document).foundation();
    </script>
</body>
  
</html>


Output:

Foundation CSS Base Typography Ordered Lists

Foundation CSS Base Typography Ordered Lists

Reference: https://get.foundation/sites/docs/typography-base.html#ordered-lists



Last Updated : 16 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads