In CSS, you can style links (<a>
tags) to change their appearance based on different states such as normal, hovered, active, and visited.
Basic link states
1. Normal (a
): The default state of the link.
a {
color: green; /* you can put any color value */
}
2. Visited (a:visited
): When the link has been visited.
a:visited {
color: purple;
}
3. Hover (a:hover
): When the mouse is over the link.
a:hover {
color: red;
}
4. Active (a:active
): When the link is being clicked.
a:active {
color: yellow;
}
Text Decorations Property
text-decoration: none
a {
color: green; /* you can put any color value */
text-decoration: none;
}
a:visited {
color: purple;
text-decoration: none;
}
a:hover {
color: red;
text-decoration: none;
}
a:active {
color: yellow;
text-decoration: none;
}
text-decoration: underline
a {
color: green;
text-decoration: underline;
}
a:visited {
color: purple;
text-decoration: underline;
}
a:hover {
color: red;
text-decoration: underline;
}
a:active {
color: yellow;
text-decoration: underline;
}
Background color Property
a {
color: green;
background-color: LightBlue;
}
a:visited {
color: purple;
background-color: LightBlue;
}
a:hover {
color: red;
background-color: LightBlue;
}
a:active {
color: yellow;
background-color: LightBlue;
}