In HTML web pages, you can set links by using anchor tags (<a>). But you would look that is a simple link, no styles were applied. CSS gives special styles for your specified link on HTML pages.CSS links property have many more properties that you can apply on simple links. You can set following properties of a hyperlink −
The :link signifies unvisited hyperlinks.
The :visited signifies visited hyperlinks.
The :hover signifies an element that currently has the user’s mouse pointer hovering over it.
The :active signifies an element on which the user is currently clicking.
Usually, all these properties are kept in the header part of the HTML document.
Remember a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective. Also, a:active MUST come after a:hover in the CSS definition as follows −
<style type = "text/css">
a:link {color: #000000}
a:visited {color: #006600}
a:hover {color: #FFCC00}
a:active {color: #FF00CC}
</style>
Now, we will see how to use these properties to give different effects to hyperlinks.
Set the Color of Links
Table of Contents
The following example demonstrates how to set the link color. Possible values could be any color name in any valid format.
<html>
<head>
<style type = "text/css">
a:link {color:red;}
</style>
</head>
<body>
<a href = "www.bittutech.com">Link</a>
</body>
</html>
This will produce following results.
Change the Color of Visited Link
This property shows that visited link color is possible to change.let’s try one example to understand better.
<html>
<head>
<title>
Change the visited link color
</title>
<style type = "text/css">
a:visited
{
color: orange;
}
</style>
</head>
<body>
<a href = "https://bittutech.com">link</a>
</body>
</html>
This will provide following result.
Change the Link Color when mouse is over
The following example demonstrates how to change the color of links when we bring a mouse pointer over that link. Possible values could be any color name in any valid format.
<html>
<head>
<style type = "text/css">
a:hover {color: black;}
</style>
</head>
<body>
<a href = "https://bittutech.com/">Link</a>
</body>
</html>
This will provide following result.
Change the Link Color when mouse is clicked on it
Let’s see one example for more clarification.
<html>
<head>
<title>
Click the Link
</title>
<style>
a:active
{
color:red;
}
</style>
</head>
<body>
<a href="https://bittutech.com/">My Site</a>
</body>
</html>
This will provide following result.
