❮❮ PREV NEXT ❯❯

CSS - Links

Links as we already know are used to go from one page to another. And in CSS we can apply styles on Links or the <a> element. And the styles can be applied with any CSS property.

Let us directly dive into a live example and understand links in CSS.

Example of CSS Links

Example :

<html>
<head>
    <style>
        a {
  			color: red;
		}
    </style>
</head>

	<body>
   		<a href="#"> Click here </p>
	</body>
</html>

Output :

So, in the above example, we have used the CSS property color and set its value to red, on the <a> element.

<style>
	a {
		color: red;
	}
</style>

And if we see the above output, the color of the contents of <a> element(i.e. Click here) is red in color.

States of Link in CSS

There are four commonly used states that a link can have in CSS :

a:link

This state represents unvisited links.

a:visited

This state represents visited links.

a:hover

This state represents the hovered links.

a:active

This state represents clicked links.

Example :

<html>
<head>
    <style>
    	a:link {
      		color: orange;
    	}

    	a:visited {
      		color: red;
    	}

    	a:hover {
      		color: blue;
    	}

    	a:active {
      		color: violet;
    	}
    </style>
</head>

	<body>
   		<a href="https://www.learnerslesson.com"> Click here </p>
	</body>
</html>

Output :

So, in the above example, we have defined four states for the links(Or <a> element) in CSS.

<style>
	a:link {
		color: orange;
	}

	a:visited {
		color: red;
	}

	a:hover {
		color: blue;
	}

	a:active {
		color: violet;
	}
</style>

When the link is not visited, the color is orange. Which is mentioned in a:link .

a:link {
	color: orange;
}

Similarly, when the link is visited, the color is red. Which is mentioned in a:visited.

a:visited {
	color: red;
}

Again, when we hover on the link(i.e. Move the mouse over the link), the color is blue. As mentioned in a:hover.

a:hover {
	color: blue;
}

And lastly, when we just click on the link, the color is violet. As mentioned in a:active.

a:active {
	color: violet;
}

Just remember that the a:hover state must come after a:link and a:visited. And a:active should come only after a:hover.

❮❮ PREV NEXT ❯❯