<!DOCTYPE html>
<html>
  <head>
    <title>HTML Lists</title>
        <style>
        #circle-list{
          list-style-type:circle;
        }
        #nested-list{
          list-style-type:none;
        }
        #square-list{
          list-style-type:square;
        }
        </style>
  </head>
  <body>
    <p>Preceding Text</p>
        <ol type = "I">
          <li>List Item 1
            <ol type = "a">
                  <li>Nested Item 1.1</li>
                  <li>Nested Item 1.2</li>
                </ol>
          </li>
          <li>List Item 2
            <ol type = "1">
                  <li>Nested Item 2.1</li>
                  <li>Nested Item 2.2
                    <ul id = "circle-list">
                                <li>Nested Item 2.2.1</li>
                                <li>Nested Item 2.2.2
                                  <ul id = "square=list">
                                    <li>Nested Item 2.2.2.1</li>
                                        <li>Nested Item 2.2.2.2</li>
                                  </ul>
                                </li>
                    </ul>
           </li>
                        <li> Nested Item 2.2</li>
                </ol>
          </li>
        </ol>
  </body>
</html>