CODEWITHSUNDEEP
htmlcss
Misha Moroshko
Misha Moroshko

Reputation: 171321

Links styling in CSS

Why the following styling of the link does not work ?

<html>
<head>
<style type="text/css">
    a:link {color:#123456;}    /* unvisited link */
</style>
</head>

<body>
    <a href="http://www.google.com">Visit Google</a>
</body>
</html>

Thanks !

Upvotes: 1

Views: 186

Answers (3)

Jonathan Stegall
Jonathan Stegall

Reputation: 530

For some general best practices, the link styling hierarchy works like this:

a:link {
color: #ff0000;
}
a:visited {
color: #ff0000;
}
a:hover {
color: #cccccc;
}
a:focus {
color: #cccccc;
}
a:active {
color: #cccccc;
}

It's best to always apply all of these, whether you do them singly as above or like this:

a:link, a:visited {
color: #ff0000;
}
a:hover, a:focus, a:active {
color: #cccccc;
}

But regardless, the order is very important and things can be overwritten if it isn't followed.

Upvotes: 3

Azeem.Butt
Azeem.Butt

Reputation: 5861

And you shouldn't rely on it working in the future:

http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/

Upvotes: 0

Josh K
Josh K

Reputation: 28885

It's because the link has been visited.

Try

a {color: blue;} /* unvisited link */
a:visited {color: orange;} /* visited link*/

If you remove the last declaration links will be blue regardless of :visited.

Upvotes: 2

Related Questions