

Code I

<body>
<div id="content">
  <h1>This is the heading</h1>
  <p>This is the paragraph text. <strong>This strong sentence should be
  orange.</strong> And this one should not.</p>
  <ul>
    <li>This is a regular list item.</li>
    <li><strong>This strong list item should be blue.</strong></li>
    <li>This is a regular list item.</li>
  </ul>
</div>
<div id="side">
  <p>This is the side content. <strong>This strong sentence should be bold
  with no color.</strong> And this sentence is normal again. </p>
</div>
</body>

Code II

<body>
<div id="content">
  <h1>Site Map </h1>
  <ul>
    <li><a href="javascript:;">Primary Level Link 1</a>
      <ul>
        <li><a href="javascript:;">Secondary level link 1</a>
          <ul>
            <li><a href="javascript:;">Tertiary level link 1</a></li>
            <li><a href="javascript:;">Tertiary level link 2 </a></li>
          </ul>
        </li>
        <li><a href="javascript:;">Secondary level link 2</a> </li>
      </ul>
    </li>
    <li><a href="javascript:;">Primary Level Link 2</a>
      <ul>
        <li><a href="javascript:;">Secondary level link 1</a></li>
      </ul>
    </li>
    <li><a href="javascript:;">Primary Level Link 3 </a>
      <ul>
        <li><a href="javascript:;">Secondary level link 1</a></li>
        <li><a href="javascript:;">Secondary level link 2</a>
          <ul>
            <li><a href="javascript:;">Tertiary level link 1</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="javascript:;">Primary Level Link 4 </a></li>
  </ul>
</div>
<div id="side">
  <ul>
    <li>Side Item 1</li>
    <li>Side Item 2</li>
    <li>Side Item 3 </li>
  </ul>
  <p> This is side content in paragraph form. And of course, if you chose, you
  could go on and on till half of forever.</p>
</div>
</body>

Code III

ul li a {
	color: #005FBE;
	font-weight: bold;
}
ul ul li a {
	color: #004C97;
	font-weight: normal;
}
ul ul ul li a {
	color: #036;
}