Styling Links Working with CSS

CSS Web Development Front End Technology

CSS allows us to style links as desired. We can format text, by adding colors, background, increase size, etc. Furthermore, animations can be added to create a pleasant visual effect.

For proper functionality, the order of pseudo selectors is given by:- :link, :visited, :hover, :active.

Example

The following examples illustrate styling of links with CSS −

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
p {
   margin: 25px;
}
#mod {
   padding: 10px;
   color: darkturquoise;
   border: thin solid;
   background-color: lemonchiffon;
}
#mod:hover {
   color: white;
   box-shadow: 0 0 0 1px black;
   background-color: slateblue;
}
</style>
</head>
<body>
<p>
<a href="mailto:user@example.com">Demo link</a>
</p>
<p>
<a id="mod" href="mailto:user@example.com">Modified demo link</a>
</p>
</body>
</html>

Output

This gives the following output −

On hovering the second link, we get the following output −

Example

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin: 25px;
   display: flex;
   float: left;
   border: thin solid;
   background-color: snow;
   padding: 20px;
}
body * {
   border-radius: 5%;
}
#mod {
   padding: 10px;
   color: royalblue;
   text-decoration: none;
}
#mod:hover {
   box-shadow: 0 0 10px 2px black;
   text-decoration: overline;
   font-size: 1.2em;
}
</style>
</head>
<body>
<div>
<button><a href="#">Demo</a></button>
<a id="mod" href="#">Demo</a>
</div>
</body>
</html>