CSS Link Styling
The default color of links is blue but in CSS you can change the color of the links.
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Link Style </title>
<meta charset="UTF-8">
<style>
a {
color: green;
}
</style>
</head>
<body>
<p><b><a href="https://coderepublics.com" target="_blank">This is a link</a></b></p>
</body>
</html>
Output
Links can be styled with any CSS property (e.g. color, font-family, background, etc.). Links can be styled differently
depending on what state they are in.
Some link states are:
| Types |
Description |
| a:link |
Normal, unvisited link |
| a:visited |
Visited link |
| a:hover |
When the user mouse gets over it. |
| a:active |
The moment when a link is clicked. |
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Link Color Property </title>
<meta charset="UTF-8">
<style>
/* unvisited link */
a:link {
color: purple;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: red;
}
/* selected link */
a:active {
color: brown;
}
</style>
</head>
<body>
<p><b><a href="https://coderepublics.com" target="_blank">This is a link</a></b></p>
</body>
</html>
Output
Link Text Decoration
The text-decoration property is used to remove underlines from links:
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Text Decoration </title>
<meta charset="UTF-8">
<style>
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
</style>
</head>
<body>
<p><b><a href="https://coderepublics.com" target="_blank">This is a link</a></b></p>
</body>
</html>
Output
Link Background Color
The background-color property is used to specify a background color for links:
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Background Color </title>
<meta charset="UTF-8">
<style>
a.link {
background-color: black;
}
a.visited {
background-color: white;
}
a.hover {
background-color: yellow;
}
a.active {
background-color: gray;
}
</style>
</head>
<body>
<p><b><a href="https://coderepublics.com" target="_blank">This is a link</a></b></p>
</body>
</html>
Output
CSS Link Buttons
In this example, we combine several CSS properties to display links as boxes/buttons, have a look at it:
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Link Button </title>
<meta charset="UTF-8">
<style>
a:link, a:visited {
background-color: seagreen;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: brown;
}
</style>
</head>
<body>
<a href="https://coderepublics.com" target="_blank">This is a link</a>
</body>
</html>
Output