Home » The tutorial » Styling the navigation links

Styling the Navigation Links 

Bob just called in a panic.  The navigation panel looks terrible.  He just hates that the links are blue and underlined and wants them to match the rest of his site.  He wants them black and to underline when the visitors mouse over them.  

Fortunately, this is a pretty easy step.

CSS
First thing we need to do is update our style.css file again.  Underneath the declaration for td.navigation add the following code.

td.navigation a {
   display:        block;
   color:          black;
   text-decoration:none;
}
td.navigation a:hover   {
   text-decoration:    underline;
}

This will style any anchor tags with the design we want.  

Notice the a:hover declaration.  :hover is a 'pseudoclass' that fires when the mouse is over the link.  The way the code is set up now it will just cause the link to underline; but we could change colors, fonts, size, really anything.  There is also a pseudoclass for active and visited, but we're going to ignore those for now.

Also see how we added display:block;.  This causes each anchor tag to be on its own line.  This is a personal preference of mine.   You could just as easily put a <br> tag after each link as we did in the original header.php file.  I've found that having navigation links displayed as block makes it a little easier for maintenance down the road.  

header.php
We need to make one small change to header.php.  Find the lines where we created the links for the navigation cell and change it to the following.

<td class="navigation">
<a href="index.php">Home</a>
<a href="portfolio_wedding.php">Wedding Portfolio</a>
<a href="portfolio_portrait.php">Portrait Portfolio</a>
<a href="pricing.php">Pricing</a>
<a href="contact.php">Contact</a>
</td>

I left the cell opening and closing tags to give you perspective where the change is.  Notice that we took out the <br> tags after each anchor tag.

And now?
Here's version 10 of Bob's site.