Developing Your Styles for These Elements

Working with the Nav:

The HTML coding used to create this navigation (I wrote this code first):

<nav>
<a href="index.html"> HOME </a>
<a href="cats.html"> CATS </a>
<a href="dogs.html"> DOGS </a>
<a href="turtles.html"> TURTLES </a>
</nav>

The CSS Document Styles used to create this navigation (in head of document):

<style type="text/css">
nav {background-color: #cfa865; text-align: center; padding: 5px 0 5px 0; }
nav a:link, nav a:visited {color: #792d0b; padding: 10px 20px; font-weight: bold; letter-spacing: 1px; }
nav a:hover {color: #f2ebcd; }
<style>

As you can see I added nav in front of each link type I styles so those styles would only apply the the links in that specific location. If I have links somewhere else on my page, I can give them completely different styling.

---

If I wanted to have slightly more fancy rollover navigation I might use these styles instead:

<style type="text/css">
/* Adding more styles to the navigation */
nav { padding: 10px 0; background-color: #f2ebcd; text-align: center; }
nav a:link, nav a:visited {background-color: #cfa865; color: #792d0b; padding: 10px 20px;
    font-weight: bold; letter-spacing: 1px; text-decoration: none;
    border-right: solid 2px #8d5258; border-left: solid 2px #d8a3aa; }
nav a:hover {background-color: #8a4645; color: #f2ebcd;
    border-right: solid 2px #58262a; border-left: solid 2px #58262a;}
/* end of navigation */
</style>