CSS Tutorial: Amazing Facts About Anchor Classes

Hello, friends today we learn about Anchor pseud classes in CSS. If you make google search you will find which site you visited, that hyperlinks change into purple color from blue color. It all happens with the help of anchor pseudo-classes in CSS. Let’s see the following code to understand better.

In this following code, we use internal CSS. So, you get some exposer to this technique as well.

Code:

<html>
	<head>
		<title>
			Anchor Pseudo Classes
		</title>
		
		<style type="text/css">
			/* unvisited link */
			a:link {
			  color: blue;
			}

			/* visited link */
			a:visited {
			  color: purple;
			}

			/* mouse over link */
			a:hover {
			
			  color: orange;
			}
		</style>
       </head>
	
	<body>
		<h1>
		    <a href="http://instagram.com/developers_nation/">
			Developers Nation
		    </a>
		</h1>
		
		<h2>
		    <a href="https://www.developersnation.co.in/blog">
			Developers Nation Blog
		    </a>
		</h2>
	</body>
</html>

Output:

So, we click on the link, and we would see that the link color changes into another color. The output would be as follows:

As you can see, when I’m put my mouse cursor on the second link its color was changed into orange color. that the power of anchor pseudo-classes. try it your self. just copy this code and paste on your text editor like notepad, atom, vs code, etc. and save this code as .html extension file. Click on the file and it opens in your default browser.

Let’s see the CSS code for this anchor class. We see that the following CSS styles for the kink tags:

a: link { color: blue; }

a: visited { color: purple; }

a: hover { color: orange; }

Initially, the links would be blue in color; however, the color changes to purple if we click on the link at least once. And when we hover over the link, we can see that the color of the link changes to orange, as shown in the following screenshot:

So, that how modern web searching achieves this cool feature to change color from blue to purple. It’s very helpful to users that when they see the color is different from other links they easily find that they have visited this site. Then It will save their time and efforts on the internet.

Share This Post To Your Friends