CODEWITHSUNDEEP
htmlcsshyperlink
Trusha_Patel
Trusha_Patel

Reputation: 71

Hyper link Color-styling in CSS

The hyperlink's initial colour is blue, i.e,, of the visited selector. But the background-colour is black, i.e., of the link selector. Additionally, after visiting the link once, the text colour remains blue as it should be, but the background does not transform to transparent.

Here is the styling code: 

<style>
a:link {
  color: pink;
  background-color: black;
  text-decoration: none;
}
a:visited {
  color: blue;
  background-color: transparent;
  text-decoration: none;
}
a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}
a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}
</style>
</head>
<body>

<h2>Link Colors</h2>

<a href="html_images.asp" target="_self">HTML Images</a> 

</body>
</html>

I am not able to understand the behaviour of the link selectors. Why is the formatting unclear, and am getting the random mixed-output from the two different and exclusive selector?

Upvotes: 0

Views: 1198

Answers (2)

Anjs
Anjs

Reputation: 616

You need to add some background-color to anchor tag and add link with visited for visited to work like a:visited:link. Try below CSS :

a:link {
  color: pink;
  background-color: black;
  text-decoration: none;
}
a:visited:link {
  color: blue;
  background-color: transparent !important;
  text-decoration: none;
}
a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}
a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}

a {
  background-color: #fff;
}

Upvotes: 0

KarthikNayak98
KarthikNayak98

Reputation: 363

Visited: A link when it has already been visited (exists in the browser's history), styled using the :visited pseudo-class.

So if you have visited your link at least once it will always be visited

You can read more about this here.

Upvotes: 1

Related Questions