Home »
CSS
Styling Links in CSS
CSS Styling Links: Here, we are going to learn about the styling to links in CSS, defining color, background colors, underline etc.
Submitted by Anjali Singh, on November 04, 2019
CSS Styling Links
The links in CSS can be styled in various ways to make our website more presentable and attractive. The links can also be styled depending on their states e.g. visited, active, hover, etc.
The four links states are,
- a:link: a normal, unvisited link
- a:visited: a link that user has visited
- a:hover: a link the moment user mouses over it
- a:active: a link when it is clicked
There are various methods to style our links, some of them are listed below,
Color
The color of the links can be altered with whatever you decide to pick. As mentioned the links can be styled depending on their states.
Syntax:
a:link{
color:red;
}
Example:
<!DOCTYPE html>
<head>
<style>
a:link {
background-color: red;
color: white;
}
a:active {
background-color: black;
}
</style>
</head>
<html>
<body>
<a href="#">It's a link1</a>
<br/>
<a href="#">It's a link2</a>
<br/>
<a href="#">It's a link3</a>
<br/>
<a href="#">It's a link3</a>
<br/>
</body>
</html>
Output
The above code sets white color to the link.
Text Decoration
The text-decoration is the most commonly used property when it comes to styling links.
The text-decoration property is used to remove or set underlines on links. The possible values of text-decoration are: none, underline, overline, blink, line-through and inherit.
Syntax:
a:link{
text-decoration:none;
}
Example:
<!DOCTYPE html>
<head>
<style>
a:link {
text-decoration: none;
}
a:hover {
text-decoration: overline;
}
</style>
</head>
<html>
<body>
<a href="#">It's a link1</a>
<br/>
<a href="#">It's a link2</a>
<br/>
<a href="#">It's a link3</a>
<br/>
<a href="#">It's a link3</a>
<br/>
</body>
</html>
Output
The above code sets the decoration to the link and overline, when we hover on the link.
Background Color
The background-color is yet another most commonly used property to set the background color of our links so that they appear flashy and once any visitor visits your site, they won’t be able to ignore that link.
Syntax:
a:link{
background-color:red;
}
Example:
<!DOCTYPE html>
<head>
<style>
a:link {
background-color: red;
}
a:hover {
background-color: pink;
}
</style>
</head>
<html>
<body>
<a href="#">It's a link1</a><br/>
<a href="#">It's a link2</a><br/>
<a href="#">It's a link3</a><br/>
<a href="#">It's a link3</a><br/>
</body>
</html>
Output
The above code sets the background-color to the link when we hover on the link.
CSS Tutorial & Examples »