CSS Styling Links - Lena Design

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.

CSS :hover and :active Selectors — *to see the code of the CSS link animation above on the website click here.

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:

This is a link.

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:

This is a link.

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:

This is a link.

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:

This is a link.

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:

This is a link.

Enjoy coding!

Share this: