CSS Links
CSS Link is used to create styled link. There are various ways to implement it.
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>