Below is two different style lists for the site index page. The bottom one is without the subsections and much easier. The top one has the subsections in 5 of the 7 pages. They deserve a explanation.
The syntax for nesting a ordered list inside another ordered list is:
<ol>
<li>
        <ol>
        <li></li>
        <li></li>
        <li></li>
        </ol>
</li>
</ol>
There is a class selector called linkstyle with the <li> tag. I have a bunch of styling in the header I will put on the bottom of page.
In the links, on the list below, you will see a # sign with some kind of a name behind it. #basic, #meta, #links. These are the part of the anchor link which will take you to another page and to a certain part on the page. You put in the address to the page and the #anyname behind it like in the example. You have to add id="basic" , id="meta" , id="links" to the page and spot you want the link to take you to. I usually hook my id selector to a h4 heading. This would go on the page that you land on after clicking the link:
<h4 id="csstext">CSS for Text</h4>
This will go on the Table of Contents(site index) page:
<li class="linkstyle"><a href="styletext.html#csstext"></a></li>

<ol>
<li><a href="contents.html">page 1</a>
	    <ol>
	    <li class="linkstyle"><a href="contents.html#basic">Page 1 section a</a></li>
	    <li class="linkstyle"><a href="contents.html#meta">Page 1 section b</a></li>
	    <li class="linkstyle"><a href="contents.html#links">Page 1 section c</a></li>
	    </ol>
</li>
<li><a href="contents.html">Page 2</a></li>
<li><a href="contents.html">Page 3</a></li>
<li><a href="contents.html">Page 4</a>
	    <ol>
	    <li class="linkstyle"><a href="contents.html#def">Page 4 section a</a></li>
	    <li class="linkstyle"><a href="contents.html#syntax">Page 4 section b</a></li>
	    </ol>
</li>
<li><a href="contents.html">Page 5</a>
	    <ol>
	    <li class="linkstyle"><a href="contents.html#tags">Page 5 section a</a></li>
	    <li class="linkstyle"><a href="contents.html#tags2">Page 5 section b</a></li>
	    </ol>
</li>

<li><a href="html_head.html">Page 6</a>
	    <ol>
	    <li class="linkstyle"><a href="contents.html#head">Page 6 section a</a></li>
	    <li class="linkstyle"><a href="contents.html#head2">Page 6 section b</a></li>
	    </ol>
</li>
<li><a href="box_model.html">Page 7</a>
	    <ol>
	    <li class="linkstyle"><a href="contents.html#boxsize">Page 7 section a</a></li>
	    <li class="linkstyle"><a href="contents.html#inline">Page 7 section b</a></li>
	    <li class="linkstyle"><a href="contents.html#block">Page 7 section c</a></li>
	    </ol>
</li>
</ol>

Here is the easier style index page.

<ol>

<li><a href="contents.html">page 1</a></li>

<li><a href="contents.html">Page 2</a></li>

<li><a href="contents.html">Page 3</a></li>

<li><a href="contents.html">Page 4</a></li>

<li><a href="contents.html">Page 5</a></li>

<li><a href="html_head.html">Page 6</a></li>

<li><a href="box_model.html">Page 7</a></li>

</ol>

CSS

Use this CSS for either set of HTML. I put the CSS in the header for this page. That way the special styling for the lists does not effect the lists on other pages.

<style>
ol li {
font-size:1.5rem;
}
.linkstyle {
font-size:1rem;
}
li {
line-height:1.6;
color:black;
}
article {
background-color:white;
color:black;
}
ol li a:link {
color:black;
text-decoration:none;
}
ol li a:visited {
color:black;
text-decoration:none;
}
ol li a:hover {
color:blue;
text-decoration:none;
}
ol li a:active {
color:red;
text-decoration:none;
}
h1, h2 {
color:black;
}
h3, h4, h5, h6 {
color:black;
}
@media screen and (max-width: 999px) {
ol li {
font-size:1rem;
}
.linkstyle {
font-size:1rem;
}
.paraone {
font-size:1rem;
text-align:left;
color:black;
}
}
</style>

RWDHTMLCSS.COM

Html & CSS Walkthrough

Table of Contents

Here is the easier style index page.

CSS