CSS Links
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
- color
- background-color
Text Decoration¶
As you remember when we create a link, by default it is underlined. When we want to remove it we must use the 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 at 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 the 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 the 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.
0 Comments
CAN FEEDBACK
Emoji