The Cascade in Action

Example 10.9

Example 10.9 Source:

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat nisi at sapien.
    Phasellus varius tincidunt ligula. Praesent nisi. Duis sollicitudin. </p>
  <div id="maincontent" >
    <p>Suspendisse mollis leo nec diam. Vestibulum pulvinar tellus sit amet nulla fringilla
      semper. Aenean aliquam, urna et accumsan sollicitudin, tellus pede lobortis velit,
      nec placerat dolor pede nec nibh. 
      Vestibulum nibh.</p>
    <div class="note" >
      <ul>
        <li>Proin sollicitudin ante vel eros.</li>
        <li>Nunc tempus.</li>
        <li>Quisque vitae quam non magna mattis volutpat.</li>
      </ul>
      <p>Quisque feugiat tellus ultricies urna. Pellentesque habitant morbi tristique
        senectus et netus et malesuada fames ac turpis egestas. Nullam tincidunt.</p>
    </div>
    <ul>
      <li>Pellentesque sit amet metus.</li>
      <li>Sed sollicitudin feugiat massa.</li>
      <li>Sed magna.</li>
    </ul>
  </div>
  <p>Sed malesuada elit non augue. Vestibulum nec nulla. Aenean orci. Ut sem leo, placerat quis, ultricies nec, lacinia in, ante. Proin leo elit, dignissim nec, tincidunt dictum, mattis et, arcu.</p>
  <div class="note" >
    <p>Morbi faucibus ornare pede. Aenean bibendum pharetra arcu. Vestibulum a quam. Donec
      commodo ultricies tortor. Nulla mattis fermentum erat. Aliquam at tortor eget velit
      egestas aliquet. Nam quam.</p>
  </div>

In style element (<style type="text/css">) within head element:

Example 10.9 Rendered: