Using CSS and psuesdo elements to Style Navigation Menus

As you can see, we are using the default browser styles for our links on this page and it is not very pretty. CSS styling can really shine up your navigation...

Here's how...
1. ) Make an unordered list of your navigation and we give the unordered list the id name "nav" 

<!-- Start Navigation -->
<ul id="nav">

        <li><a href="../index.html">Home</a></li>
        <li><a href="../lesson1.html">Lesson 1</a></li>
        <li><a href="../lesson02.html">Lesson 2</a></li>
        <li><a href="../lesson3.html">Lesson 3</a></li>
        <li><a href="../lesson04.html">Lesson 4</a></li>
        <li><a href="../Class5new.html">Lesson 5</a></li>
        <li><a href="../NewSyllabus.html">Syllabus</a></li>
        <li><a href="../resource.html">Resources</a></li>
        <li><a href="../lesson3.html#Fonts">Fonts</a></li>
        <li><a href="../contact/index.html">Contact</a></li>
        <li><a href="../images.html">Inserting Images...</a></li>
        <li><a href="../imageproc/DisplayingImages.html">Making Thumbnails</a></li>
        <li><a href="../BoxModel.html">The Box Model</a></li>
        <li><a href="../CSSRules.html">Some CSS Rules</a></li>
        <li><a href="../position/index.html">Position is everything</a></li>
        <li><a href="../layouts/simple.html">Layouts</a></li>
        <li><a href="../links.html">Links</a></li>
        <li><a href="../domain.html">Hosts & Domain Names </a></li>
        <li><a href="../copyright.html">Copyright Info </a></li>
      </ul>

This html file (navlist-0.html) is in a folder named BasicCSS, so to make these links actually work, the "../" dot dot forward slash tells a browser to go up one level (back out of the folder you are in) and look for the folder and/or file listed in the following path.

Go to the next page #5