In this chapter, we will explain how we can give styles to links, how to make links more beautiful.
The link has these four states:
- a :link - a normal, unvisited link
- a :visited - a link that the user has already visited
- a :hover - a link when the user hovers over it
- a :active - a link at the moment when it is clicked
We will speak about these properties:
Text Decoration
As you remember when we create a link, by default it is underlined. When we want to remove it we must use text-decoration property.
Example of using the text-decoration property to style a link:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
</style>
</head>
<body>
<a href="#"> This is some link.</a>
</body>
</html>Let's explain the meaning of our code.
Here you can see that our link in its first and second state will be without underline. The link is underlined when the user mouses over it and when a link is clicked in the moment.
You can check it in your browsers with your editors or with our online editor click here and go to the page of the editor.
These styles can be written in either the <head> section or in CSS file that you will use for your webpage.
Color
The color property we use for the color of the link.
For example when we want our link to be black and to be #1c87c9 in its 3rd state (a: hover) we need to write the following:
Example of using the color property to style a link:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a:link {
color: #000000;
}
a:visited {
color: #000000;
}
a:hover {
color: #1c87c9;
}
a:active {
color: #1c87c9;
}
</style>
</head>
<body>
<a href="#">This is some link.</a>
</body>
</html>Result
Background Color
What can we do if we want our link to be with a background?
We just need to give a style with background-color property.
For example, our link will be with a gray background, and in the hover, it will be #1c87c9.
When the first (a:link) and the second (a:visited) states have the same background color we can write just a.
Example of using the background-color property to style a link:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a {
background-color: #555555;
}
a:hover {
background-color: #1c87c9;
}
a:active {
background-color: #1c87c9;
}
</style>
</head>
<body>
<a href="#">This is some link.</a>
</body>
</html>You can choose your preferable color with the Color Picker.
Practice Your Knowledge
Quiz Time: Test Your Skills!
Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.