How to change the link color of the current page with CSS

Question

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/"&gt;Home&lt;/a&gt;&lt;/li&gt;
    <li class="theatre"><a href="http://www.jacurren.com/theatre.php"&gt;Theatre&lt;/a&gt;&lt;/li&gt;
    <li class="prog"><a href="http://www.jacurren.com/programming.php"&gt;Programming&lt;/a&gt;&lt;/li&gt;
    <li class="resume"><a href="http://www.jacurren.com/resume.php"&gt;R&amp;eacute;sum&amp;eacute;&lt;/a&gt;&lt;/li&gt;
    <li class="portf"><a href="http://www.jacurren.com/portfolio.php"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
    <li class="contact"><a href="http://www.jacurren.com/contact.php"&gt;Contact&lt;/a&gt;&lt;/li&gt;   
    </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;
}

Answer 1

a:active : when you click on the link and hold it (active!).
a:visited : when the link has already been visited.

If you want the link corresponding to current page to be highlighted, you can define some specific style to the link -

.currentLink {
   color: #640200;
   background-color: #000000;
}

Add this new class only to the corresponding li (link), either on server-side or on client-side (using javascript).

Answer 2

a:link -> It defines the style for unvisited links.

a:hover -> It defines the style for hovered links.

A link is hovered when the mouse moves over it.