How to change the link color of the current page with CSS
- by Josh Curren
How do I display the link for the current page different from the others? I would like to swap the colors of the text and background.
This is what I currently have:
The HTML:
<div id="header">
<ul id="navigation">
<li class="bio"><a href="http://www.jacurren.com/">Home</a></li>
<li class="theatre"><a href="http://www.jacurren.com/theatre.php">Theatre</a></li>
<li class="prog"><a href="http://www.jacurren.com/programming.php">Programming</a></li>
<li class="resume"><a href="http://www.jacurren.com/resume.php">Résumé</a></li>
<li class="portf"><a href="http://www.jacurren.com/portfolio.php">Portfolio</a></li>
<li class="contact"><a href="http://www.jacurren.com/contact.php">Contact</a></li>
</ul>
</div>
The CSS:
#navigation{
margin:0;
padding:0;
background:#000000;
height:34px;
list-style:none;
position: relative;
top: 80px;
}
#navigation li{
float:left;
clear:none;
list-style:none;
}
#navigation li a{
color:#A60500;
display:block;
font-size:12px;
text-decoration:none;
font-weight:bold;
padding:10px 18px;
}
#navigation li a:hover{
color:#640200;
background-color:#000000;
}
