CSS Links
CSS Link is used to create styled link. There are various ways to implement it.
Try Now
Try Now
Styling Links
Link can be styled with CSS properties like color, font-family, background etc. Example:<!DOCTYPE html>
<html>
<head>
<style>
a {
color: red;
}
</style>
</head>
<body>
<p><b><a href="https://www.tutorialandexample.com"
target="_blank">This is a link</a></b></p>
</body>
</html>
There are four states of links
- a:link : A normal, unvisited link.
- a:visited : A link the user has visited.
- a:hover : A link when the user mouse over it.
- a:active : A link the moment it is clicked.
/* unvisited link */
a:link {
color: yellow;
}
/* visited link */
a:visited {
color: red;
}
/* mouse over link */
a:hover {
color: orange;
}
/* selected link */
a:active {
color: blue;
}
Note:
-
-
a:hover MUST come after a:link and a:visited.
-
a:active MUST come after a:hover.
-
Text Decoration
Text Decoration property is used to remove hte underlines from links:. Examplea:link {
text-decoration: none;
}
Advanced Link Buttons
The example of advance link button uses several CSS properties to display the link as box/buttons: Example<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
background-color:orange;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
</style>
</head>
<body>
<a href="https://www.tutorialandexample.com">This is a link</a>
</body>
</html>