Links Properties In CSS

By / February 1, 2022
Hey, there we bring another awesome tutorial on how to set some properties of a link using CSS, for instance, you can edit the color of the link, the color when the mouse is over the link, the color of the active link. Therefore, our training will only discuss on this properties as follows giving relevant examples;

1. Setting the color of the link


To set the color of the link you will use :link which represents unvisited links. We may have an example here for better understanding; 
<head>
<style>
a:link{color: brown}
</style>
</head>
<body>
<p>We will have link here and with the specified color in the style tags</p>
<a href="mylink.html">It is set to brown color</a>
</body>

It will produce this;

We will have link here and with the specified color in the style tags

It is set to brown color

2. Setting Color of the Link when visited

Each link is set to a certain color, but there is a color that appears when you click on that link, therefore to set that color you will use a:visited. Let’s have an example for same;

<head>
<style>
a:visited{color: red}
</style>
</head>
<body>
<p>We will have link here and with the specified color in the style tags when it is clicked</p>
<a href="mylink.html">It is set to red color</a>
</body>

It will produce this;

We will have link here and with the specified color in the style tags when it is clicked

It is set to red color

3. Setting the color when Mouse is placed over

Suppose you bring your mouse over a link? You can as well change the color of the link when mouse is placed over using a:hover let’s have an example here;

<head>
<style>
a:hover{color: green}
</style>
</head>
<body>
<p>We will have link here and with the specified color in the style tags when mouse is over</p>
<a href="mylink.html">It is set to green color</a>
</body>

It will produce this;

We will have link here and with the specified color in the style tags when mouse is over

It is set to green color

4. Setting the color of the active Links

You may as well wish to set the color of the active link. Therefore, you will use a:active let’s have an example here;

<head>
<style>
a:link{color: purple}
</style>
</head>
<body>
<p>We will have the active link here and with the specified color in the style tags</p>
<a href="mylink.html">It is set to purple color</a>
</body>

It will produce this;

We will have the active link here and with the specified color in the style tags

It is set to purple color
Thanks for reading through my tutorial, remember to leave your opinions in the comment section below. For the presentations and live sessions follows us on our YouTube channel; YOUTUBE LINK. As we continue on our training in CSS hoping to meet you in our next tutorial.