CSS on links:
CSS on links:
Being a text element, a link follows all the CSS on Text, but some styles are provided especially to the links in order to make them dynamic.
Before we start with CSS on Links, we must understand the four states of a link. These are:
- a:link (a simple link)
- a:visited (a visited link)
- a:hover (a link when mouse is hovered on)
- a:active (a link when being clicked)
For every state, we can develop a style. The most important thing is to keep the order of these states always, as they are. Following is the only epecific property that is used with hyperlinks.
|
Property
|
Value
|
Description
|
|
text-decoration
|
none;
|
Removes the default underline
|
|
underline;
|
Sets an underline
|
|
overline;
|
Sets an overline
|
|
line-through;
|
Sets a strike through
|
Example 1: Simple hyperlinks with text-decoration, color and background-color
<![CDATA[<html>
<head>
<style>
a{
background-color:yellow;
}
</style>
</head>
<body style="background-color:white;">
<a style="text-decoration:none; color:green;" href="#">Chapter 1</a><br><br>
<a style="text-decoration:underline; color:maroon;" href="#">Chapter 2</a><br><br>
<a style="text-decoration:overline; color:darkblue;" href="#">Chapter 3</a><br><br>
<a style="text-decoration:line-through; color:tomato;" href="#">Chapter 4</a>
</body>
</html>]]>
Output 1:
Example 2: All four states of hyperlinks
<![CDATA[<html>
<head>
<style>
a:link
{
background-color:pink;
color:maroon;
}
a:visited
{
background-color:gray;
color:black;
}
a:hover
{
background-color:lightgreen;
color:green;
text-shadow:3px 3px 5px yellow;
}
a:active
{
background-color:skyblue;
color:blue;
}
</style>
</head>
<body style="background-color:white;">
<div style="margin-top:5px;">
<a style="text-decoration:none;" href="#">Chapter 1</a><br><br>
<a style="text-decoration:none;" href="#">Chapter 2</a><br><br>
<a style="text-decoration:none;" href="#">Chapter 3</a><br><br>
<a style="text-decoration:none;" href="#">Chapter 4</a>
</div>]]>
Output 2:
Note that text-decoration is none for all and all the links are kept in one div element whose margin from top is 5px.
Example 3: Hyperlinks as buttons with the help of padding
<![CDATA[<html>
<head>
<style>
a:link
{
background-color:pink;
color:maroon;
padding:10px;
}
a:visited
{
background-color:gray;
color:black;
padding:10px;
}
a:hover
{
background-color:lightgreen;
color:green;
text-shadow:3px 3px 5px yellow;
padding:10px;
}
a:active
{
background-color:skyblue;
color:blue;
padding:10px;
}
</style>
</head>
<body style="background-color:white;">
<div style="margin-top:17px;">
<a style="text-decoration:none;" href="#">Chapter 1</a><br><br><br>
<a style="text-decoration:none;" href="#">Chapter 2</a><br><br><br>
<a style="text-decoration:none;" href="#">Chapter 3</a><br><br><br>
<a style="text-decoration:none;" href="#">Chapter 4</a>
</div>
</body>
</html>]]>
Output 3: