[css] Don't change link color when a link is clicked

I have a link in an HTML page:

<a href="#foo">foo</a>

The color of the link text is originally blue. When the link is clicked, the color of the link text changes to Red first, and then changes back to Blue. I want to the color of the link text not to change when user clicks on it. How can I make it happen?

I tried

a:active {
    color: none;
}

in CSS, but got no luck.

And I don't want to use this in CSS:

a:active {
    color: blue;
}

, because the original color of the link text can be some other than blue.

Thanks.

Edit: the page is displayed on iPhone browser, and I want to make a:active to keep the original link text color.

You need to use an explicit color value (e.g. #000 or blue) for the color-property. none is invalid here. The initial value is browser-specific and cannot be restored using CSS. Keep in mind that there are some other pseudo-classes than :active, too.

just give

a{
color:blue
}

even if its is visited it will always be blue

I think this suits perfect for any color you have:

a {
    color: inherit;
}

you are looking for this:

a:visited{
  color:blue;
}

Links have several states you can alter... the way I remember them is LVHFA (Lord Vader's Handle Formerly Anakin)

Each letter stands for a pseudo class: (Link,Visited,Hover,Focus,Active)

a:link{
  color:blue;
}
a:visited{
  color:purple;
}
a:hover{
  color:orange;
}
a:focus{
  color:green;
}
a:active{
  color:red;
}

If you want the links to always be blue, just change all of them to blue. I would note though on a usability level, it would be nice if the mouse click caused the color to change a little bit (even if just a lighter/darker blue) to help indicate that the link was actually clicked (this is especially important in a touchscreen interface where you're not always sure the click was actually registered)

If you have different types of links that you want to all have the same color when clicked, add a class to the links.

a.foo, a.foo:link, a.foo:visited, a.foo:hover, a.foo:focus, a.foo:active{
  color:green;
}
a.bar, a.bar:link, a.bar:visited, a.bar:hover, a.bar:focus, a.bar:active{
  color:orange;
}

It should be noted that not all browsers respect each of these options ;-)

Don't over complicate it. Just give the link a color using the tags. It will leave a constant color that won't change even if you click it. So in your case just set it to blue. If it is set to a particular color of blue just you want to copy, you can press "print scrn" on your keyboard, paste in paint, and using the color picker(shaped as a dropper) pick the color of the link and view the code in the color settings.