Links play a vital part in your websites by making them interactive, so it's important to style them properly. In this topic, you'll see how to achieve this with selectors that apply properties to links in different states. Let's get started!
Styling links with CSS
You already know that the a element is used for creating links on your websites. And now you're going to learn about the four different link states — link, visited, active, and hover. Each state can be given its own style using CSS selectors:
a:linkfor unvisited hyperlinks;a:visitedfor visited hyperlinks;a:hoverto indicate that the link has a mouse pointer hovering over it; anda:activeto show that the link is currently being clicked.
Think about the CSS properties you have learned about so far, such as color, font, border, padding, etc. You can apply any of these properties to your links, making them more appealing and interactive!
Take a look at the code snippet below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>CSS Link</title>
</head>
<body>
<p><a href="https://www.jetbrains.com/academy/">JetBrains Academy</a></p>
</body>
</html>We'll use this code as a starting point for demonstrating the four different link states. Right now, our link looks plain because it doesn't have any style applied to it, so let's change that!
Link
We will begin by styling our a element with the a:link selector. This sets the unvisited state of our hyperlink, as shown below:
a:link {
color: rgb(84, 4, 87);
text-decoration: none;
font-size: 30pt;
}Now the link should look like this:
Visited
Great! Next, we'll use the a:visited selector to change the appearance of our hyperlink once it's been visited. Check out the code snippet below:
a:visited {
color: red;
}This is how the hyperlink should look after a user visits it:
Hover
As previously mentioned, you can apply any style you like to your links. So, to showcase the a:hover selector more effectively, we can turn our link into a button. You've already discovered that a:hover is used to indicate that a link has a mouse pointer hovering over it. Now let's see how that can be utilized in practice. Consider the following code snippet:
a {
text-decoration: none;
padding: 10pt;
background-color: rgb(22, 15, 22);
color: white;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
border: 2pt blueviolet solid;
}
a:hover {
background-color: blueviolet;
border: 2pt black solid;
}This is how our link looks after we've converted it into a button by applying properties to the a element:
And, if we hover the mouse over this button, its style will change to reflect the properties specified with the a:hover selector:
Active
In this final section, you will learn how to use the a:active selector.
As explained, a:active is used to show that the link is currently being clicked. So let's change the previous code snippet from a:hover to a:active:
a {
text-decoration: none;
padding: 10pt;
background-color: rgb(22, 15, 22);
color: white;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
border: 2pt blueviolet solid;
}
a:active {
background-color: blueviolet;
border: 2pt black solid;
}Now, our button will change color while it's being clicked instead of when we hover the mouse over it:
Conclusion
In this topic, you learned about the four different link states and the selectors you can use to apply properties to them. Armed with this knowledge, you can change the styles of the links in your web pages, making them fun and interactive. Time to put what you've learned to the test!