CSS Links can be styled with any CSS property (e.g., color, font-family, background, etc).
In addition, links can be styled differently, depending on what state they are in. The following pseudo selectors are available:
i. a: link -defines the style for normal unvisited links.
ii. a: visited -defines the style for visited links.
iii. a: hover –a link is hovered when the mouse is over it
iv. a: active -a link becomes active once you click on itg.
Usually, all these properties are kept in the header part of the HTML document.
<style type = "text/css">
a:link {color: #000000}
a:visited {color: #006600}
a:hover {color: #FFCC00}
a:active {color: #FF00CC}
</style>
Example:
<html>
<head>
<style type = "text/css">
a:link {color:#000000}
</style>
</head>
<body>
<a href = "">Link</a>
</body>
</html>
Set the Color of Visited Links:
The following example demonstrates how to set the color of visited links. Possible values could be any color name in any valid format.
Example:
<html>
<head>
<style type = "text/css">
a:visited {color: #006600}
</style>
</head>
<body>
<a href = ""> link</a>
</body>
</html>
Change the Color of CSS Links 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.
Example:
<html>
<head>
<style type = "text/css">
a:hover {color: #FFCC00}
</style>
</head>
<body>
<a href = "">Link</a>
</body>
</html>
Change the Color of Active CSS Links:
The following example demonstrates how to change the color of active links. Possible values could be any color name in any valid format.
Example:
<html>
<head>
<style type = "text/css">
a:active {color: #FF00CC}
</style>
</head>
<body>
<a href = "">Link</a>
</body>
</html>
Recommended Posts: