How to add the link to the HTML document, you can find in my previous posts (click here to see the post). To improve the look of your web page you can style your links in CSS.

Links can be styled with any CSS property like colour, font-family, background and etc…
Example:
<!DOCTYPE html>
<html>
<head>
<style>
a {
color: #2a9d8f;
}
</style>
</head>
<body>
<p><b><a href="" target="_blank">This is a link.</a></b></p>
</body>
</html>
Output:
In addition, links can be styled differently depending on what state they are in. The four links states are:
a: link – unvisited link.
a: visited – visited link.
a: hover – a link when the user hovers over it.
a: active – a link the moment it is clicked.
When setting the style for several link states, there are some order rules:
a: hover MUST come after a: link and a: visited
a: active MUST come after a: hover
Example:
<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
color: #2a9d8f;
}
/* visited link */
a:visited {
color: #264653;
}
/* hover over link */
a:hover {
color: #f4a261;
}
/* selected link */
a:active {
color: #e76f51;
}
</style>
</head>
<body>
<p><b><a href="" target="_blank">This is a link.</a></b></p>
</body>
</html>
Output:
The CSS background-color property can be used to specify a background colour for the links.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
background-color: #2a9d8f;
color: #e9c46a;
}
a: visited {
background-color: #264653;
}
a:hover {
background-color: #f4a261;
}
a:active {
background-color: #e76f51;
}
</style>
</head>
<body>
<p><b><a href="" target="_blank">This is a link.</a></b></p>
</body>
</html>
Output:
Examples of more advanced buttons:
Example 1:
<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
background-color: #2a9d8f;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: #264653;
}
</style>
</head>
<body>
<a href="" target="_blank">This is a link.</a>
</body>
</html>
Output:
Example 2:
<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
background-color: white;
color: black;
border: 2px solid #2a9d8f;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: #2a9d8f;
color: white;
}
</style>
</head>
<body>
<a href="" target="_blank">This is a link.</a>
</body>
</html>
Output:
Enjoy coding!
Read also:
CSS :hover and :active selectors