Links in CSS can be styles in different properties of CSS like color, font-family, Background etc.
In addition, links can be styled differently depending on what state they are in.
The four links states are:
- a:link - a normal, unvisited link
- a:visited - a link the user has visited
- a:hover - a link when the user mouse's over it
- a:active - a link the moment it is clicked
Example Program :
<html>
<head>
<style>
a:link {
color: Blue;
}
a:visited {
color: red;
}
a:hover {
color: black;
}
a:active {
color: red;
}
</style>
</head>
<body>
<h2>CSS Links</h2>
<p><b><a href="https://www.letsupgrade.in" target="_blank">@LetsUpgrade</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>
</body>
</html>
Output :
We can also add background color to the links like:
<html>
<head>
<style>
a:link {
background-color: yellow;
}
a:visited {
background-color: cyan;
}
a:hover {
background-color: lightgreen;
}
a:active {
background-color: hotpink;
}
</style>
</head>
<body>
<p><b><a href="https://www.letsupgrade.in" target="_blank">@LetsUpgrade</a></b></p>
</body>
</html>
Output :
Buttons using LINKS :
<html>
<head>
<style>
a:link, a:visited {
background-color: #ff0000;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
</style>
</head>
<body>
<h2>Link Button</h2>
<p>A link styled as a button:</p>
<a href="https://www.letsupgrade.in" target="_blank">LetsUpgrade</a>
</body>
</html>
Output :
And you can also decorate the texts , Can decorate the linking buttons into shapes & can also span the styles of the text using the CSS <span> tag
To learn more about CSS & its properties, follow the blogs weekly, like share & Comment & follow LetsUpgrade for more content.
