Styling links using CSS

Question

I am trying to give style to my links and I am using this order:

a{}
a:visited{}
a:focus{}
a:hover{}
a:active{}

(I am not using a:link... I just use the id's to make the links work.)

The thing is that my "a" & "a:hover" are working but "a:visited" & "a:active" are not?:: Is there a solution? I am only tying to give different color to "a:active":

a:active{
 font-family: gabriola, verdana; font-size: 26px; color: #e6e8fa; text-decoration: none; vertical-align: middle; border: none; outline: none;
}

Answer 1

I read somewhere (a quick Google suggests it could have been anywhere ) that it's easy to remember the order for anchor styling declarations using the mnemonic L o V e / HA te:

a:link
a:visited
a:hover
a:active

Answer 2

active doesn't make sense for non-link anchors (not sure about this actually, :active might be triggered on any visible element). Use this:

a:link, a:visited               // normal links
a:link:hover, a:visited:hover   // link with mouse-over
a:link:active, a:visited:active // link being clicked (mouse-down, etc.)

Also available, but less specific:

a        // any anchor
a:hover  // any anchor with mouse-over

The latter two will have their properties overridden by the more specific ones above if the anchor actually has the href attribute set.