Categories
CSS Web development

CSS Styling Links

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

Links can be styled with any CSS property like color, font-family, background and etc…

Example:

<!DOCTYPE html>
<html>
<head>
<style>
a {
  color: blue;
}
</style>
</head>
<body>

<p><b><a href="default.asp" 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. The four links states are:

a: link – unvisited link
a: visited – visited link
a: hover – a link when the user mouses 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: red;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: blue;
}
</style>
</head>
<body>

<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>

</body>
</html>

Output:

The background-color property can be used to specify a background color for the links. 

Example:

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
  background-color: yellow;
}

a: visited {
  background-color: cyan;
}

a:hover {
  background-color: lightgreen;
}

a:active {
  background-color: hotpink;
}
</style>
</head>
<body>

<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>

</body>
</html>

Output:

Examples of more advanced buttons: 

Example 1

<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}
</style>
</head>
<body>

<h2>Link Button</h2>
<p>A link styled as a button:</p>
<a href="default.asp" 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 green;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: green;
  color: white;
}
</style>
</head>
<body>

<a href="default.asp" target="_blank">This is a link</a>

</body>
</html>

Output:

Enjoy coding!

Leave a Reply

Your email address will not be published. Required fields are marked *