How to have current page's link a different color?

I have a navigation menu and I want the link to the page that the user is currently on to be a different color. I thought I could use a:active (or a:focus) but they just flash the different color and when the new page loads, it has the default color.

I am using Wordpress but after doing a simple experiemnnt, I still am suprised by the results.

page1.html

<!DOCTYPE html>
<head>
<title>css link test</title>
 <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
This is a test.<br />
<a href="page1.html">page 1</a>
<a href="page2.html">page 2</a>
</body>
</html>

page2.html

<!DOCTYPE html>
<head>
<title>css link test</title>
 <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
This is another page.<br />
<a href="page1.html">page 1</a>
<a href="page2.html">page 2</a>
</body>
</html>

mystyle.css

a:active {
     color: rgb(0,128,0);
}

How can I make it so that if page2.html is loaded, the link for it will be green? By the way, from a user experience perspective I had a hard time decided what the color actually should be for the active link, is there any literature on the subject?

Solution

You need to use a different class for the active link. Then in CSS create a class with such different styles. For example:

Page1

<!DOCTYPE html>  
<head>
    <title>css link test</title>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
   This is a test.<br />
   <a href="page1.html" class="active_page">page 1</a>
   <a href="page2.html">page 2</a>
</body>
</html>

mystyle.css

.active_page{
     color: rgb(0,128,0);
}