• We'll start from a blank slate, so delete all the HTML and CSS you've entered so far.

• Sometimes you'll want to have lists inside of lists. Think of the table of contents of a textbook where each chapter has a number of subheadings and even those may have subheadings.
• To keep it interesting, we'll look here at a simple profile of yourself.
• Enter the heading 'Who Am I?'

<h2>Who Am I?</h2>

• Now create a list of topics to cover. Even though the order doesn't matter, I'm using <ol> because I'll use it to illustrate a point later.

<ol>
  <li>Family Members</li>
  <li>Hobbies</li>
  <li>Favourite Bands</li>
</ol>

• Now we'll populate these with other lists under (inside) each topic.
• Enter the names of your family members. I don't know the names of your family, so I'll just label some options.

  <li>Family Members
    <ul>
      <li>Father</li>
      <li>Mother</li>
      <li>Sister</li>
      <li>Brother</li>
    </ul>
  </li>

• Notice that the new list needs its own <ul> or <ul> tag.
• Also notice that the whole list goes before the </li> tag of the heading list element.
• Finally, you should have noticed that the browser automatically uses different bullets for the different levels of list items.
• Try this yourself with the Hobbies and Favourite Bands sections.

• Just to quickly review the way CSS cascades to lower level elements, try the following CSS code.

ol {
  color: blue;
}

• See how even the <ul> sublists are now blue, not just the upper level <ol> that we selected. This is cascading.

• To make a point, change the second list to be ordered.

  <li>Hobbies
    <ol>
      <li>Music</li>
      <li>Football</li>
      <li>Cycling</li>
    </ol>
  </li>

• Now, add the following CSS code to target that specific list.

ol ol {
  font-weight: 700;
}

• See how only the hobbies list is bold? The top level list is an ol but it's unaffected.
• The combined selector ol ol means that the rules apply to all ordered lists inside another ordered list.