CODEWITHSUNDEEP
csshyperlinkhovervisited
Optimus Primal
Optimus Primal

Reputation: 27

CSS :link and :visited not working

I'm having one very difficult time getting :link and :visited to work on my links. I have been searching online for literally hours and read over 20 different instances of the same problem. Bizarrely enough, :hover and :active are working. What is going on?

Here's the code lines in my stylesheet:

H1 { text-align: center; width:1000px; font-size: 30pt; font-weight: bold; }

a.artlinks:link {color:#40C0FF; text-decoration: none; font-family: Cambria, Arial; }

a.artlinks:visited { color:#FF00FF; text-decoration: none; font-family: Cambria, Arial; }

a.artlinks:hover {color:#98D7F6; text-decoration: none; font-family: Cambria, Arial; }

a.artlinks:active {color:#FF0000; text-decoration: none; font-family: Cambria, Arial; }

and when I call it in my .html the code is:

<h1><a href="helloworld.html" class="artlinks">Hello World!</a></h1>

Does anyone have a solution and also, a more efficient way to give the common a.artlinks parameters simultaneously? Thanks

Upvotes: 1

Views: 5124

Answers (1)

lharby
lharby

Reputation: 3265

Your code needs a bit of a tidy up, but this is how I would do it (edit I removed the width property from the h1 for demonstration purposes). 

H1 { 
    text-align: center; 
    font-size: 30pt; 
    font-weight: bold; 
}

a.artlinks {
    text-decoration: none; 
    font-family: Cambria, Arial;
    color:#40C0FF;
}

a.artlinks:visited { 
    color:#FF00FF; 
}

a.artlinks:hover {
    color:#98D7F6; 
}

a.artlinks:active {
    color:#FF0000; 
}

See this jsfiddle: http://jsfiddle.net/lharby/zkb8thck/

As the a class has the same properties, you can define those once in a.artlinks (font-family, text-decoration). The other elements that are unique can then be defined for :hover, :active etc.

Upvotes: 1

Related Questions