Advertisement

Advertisement


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

CSS Link Style

This is a link


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

CSS Link Color Property

This is a link


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

CSS Text Decoration

This is a link


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 Background Color

This is a link


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

CSS Link Button This is a link









Become a Patron!

Note: If the updated content is not visible to you please refresh the cookies by pressing CTRL + Shift + R.