<< .. Go to : : HOME : : Exercise 8A : : Demo 8A.1 : : Demo 8A.2 : : Demo 8A.3 : : Demo 8A.4 : : Demo 8A.5 : : Demo 8A.6 : : All Class Demos .. >>

Exercise 8A Demo: Part 3

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>


Go to Part 4 of Demo 8A.

Go back to the Exercise 8A page.

© Claudia Faulk. Created 7.18.