Styling Links Working with CSS

CSSWeb DevelopmentFront 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>

Output

This gives the following output −

On hovering the second link, we get the following output

raja
Published on 08-Jan-2020 12:57:45
Advertisements