Links allow you to navigate from one page to another. In their purest forms, links are underlined blue and purple, if visited. Hence, even without any CSS coding, links in HTML look pretty different from regular text.
Default Link Values
- Underlined
- Changes to a hand icon when hovered over
- Unvisited links are blue
- Visited links are purple
- Active links are red
- Focused links have an outline around them
But who wants the default style? Why not customize the appearance of links on each web page? Sometimes, the standard styling might not go well with the background color or texture. In all these scenarios, you can quickly use CSS to style the links, which we will see in this article. But before delving deep into styling, let’s look at the different states of CSS links that we can style.
Different States of CSS Links
CSS links have different states. The states mean how the links adapt when a user interacts with them. For instance, before clicking on the link, after clicking, when hovering over, etc. Here are all the different states of CSS links.
- Link (a:link): This is the unvisited state when the user is yet to click on the link.
- Visited (a:visited): The state where the user has visited the link at least once.
- Hover (a:hover): The state when the mouse is hovering over the link.
- Active (a:active): The state where the link is clicked but is yet to navigate the user to the destination href address.
- Focus (a:focus): The state where the link is in focus, like when moved to using the tab key on the keyboard.
Syntax of CSS Links
The syntax for using CSS links is:
a:link {
style code
}
You can use some basic CSS properties with CSS links. These properties include color, font-family, text-decoration, background-color, etc. You can define the color value using the color’s name, hex code, or RGB value. The text-decoration property is basically used to keep or remove the underline from the links. To remove the underline, you can define the value as ‘none’ for the text-decoration property. We will use these properties in all the examples for styling links in different states. But before that, let’s write the HTML code we will be using across all the examples.
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Center example</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<p>Click <a href="https://www.simplilearn.com">here</a> to go to Simplilearn</p>
</body>
</html>
Output:
Styling CSS Links in the Link State
This example demonstrates how to use the four properties: color, font-family, text-decoration, and background-color, in the a:link state of CSS links.
Example:
CSS Code:
body{
font-size: 25px;
padding: 10px;
}
a:link{
color: #FFFFFF;
font-family: Times New Roman;
text-decoration: none;
background-color: red;
}
Output:
Styling CSS Links in Visited State
Here, we will look at the example for styling a visited link. The default color value for a visited link is purple; we will change it to aqua color. We will also change the font-family and background-color values. However, we won’t use the text-decoration property because it only has two values. If you want to keep the underline, you don’t have to use it. If you don’t wish to underline, use it with the value none. Since we have seen its use with ‘none’ value, we won’t use it for any of the examples. Here’s the CSS code and output for styling a visited link in the above-mentioned HTML code.
Example:
CSS Code:
body{
font-size: 25px;
padding: 10px;
}
a:visited{
color: #FFFF00;
font-family: impact;
background-color: rgb(0,0,0);
}
Output:
Styling CSS Links in Hover State
In this example, we will change the CSS links styling when it is in the hover state. We will change font-size, color, background-color when we hover over the link. Here’s the CSS code:
Example:
body{
font-size: 25px;
padding: 10px;
}
a:hover{
color: #FF7F50;
font-family: avenir;
background-color: #008080;
font-size: 50px;
}
Output Without Hovering:
Output When Hovering Over the Link:
Styling CSS Links in Active State
Lastly, we will look at an example to change CSS link default styling when in the active state.
Example:
CSS Code:
body{
font-size: 25px;
padding: 10px;
}
a:active{
color: #F4A896;
font-family: courier new;
background-color: #358597;
font-size: 100px;
}
Output When Link Not Active:
Output When Link Active:
Styling CSS Links as Buttons
Links are often used as buttons. For instance, when you develop a web page, you might want to add links as menu buttons. Hence, we will look at an example where we will use CSS links as buttons and change their styling.
Example:
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Center example</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Welcome to Simplilearn</h1>
<ul>
<li><a href="https://www.simplilearn.com">Home</a></li>
<li><a href="https://www.simplilearn.com/skillup-free-online-courses">Free Online Course</a></li>
<li><a href="https://www.simplilearn.com/resources">Resources</a></li>
<li><a href="https://www.simplilearn.com/corporate-training">Corporate Training</a></li>
<li><a href="https://www.simplilearn.com/higher-education-partnership-program-for-universities">Higher Education</a></li>
</ul>
</body>
</html>
CSS Code:
ul {
padding: 5px;
width: 100%;
}
li {
display: inline;
}
a {
text-decoration: none;
display: inline-block;
width: 19%;
margin-right: 0.5%;
text-align: center;
line-height: 2.5;
color: #F9DDD2;
}
li:last-child a {
margin-right: 0;
}
a:link, a:visited, a:focus {
background: #4A6274;
}
a:hover {
background: #E2725A;
}
a:active {
background: red;
color: white;
}
a:link Output:
a:hover Output:
a:active Output:
Advance your career as a MEAN stack developer with the Full Stack Web Developer - MEAN Stack Master's Program. Enroll now!
Conclusion
Besides text, you can also link an image, a button, a map, and several other HTML elements. You can try linking to different elements and using CSS to style the links to increase your understanding of the concept. CSS links are essential to understand as you will often come across them when developing web pages for companies. You can combine links with other CSS fundamentals like styling images, buttons, etc. Therefore, it is advised that one learn the other basic CSS concepts. You can do that by referring to Simplilearn’s CSS Tutorial for Beginners or Advanced CSS Tutorial for becoming a CSS pro. Both the tutorials will help you strengthen your CSS skills.
But learning CSS alone won’t be good enough in today’s competitive market. Today, businesses worldwide are looking for full-stack developers who can manage end-to-end projects. It helps the employers save on resources, hiring, training, costs, and much more. Hence, if you want to get your dream job, you must master all the front-end programming languages. You can enroll in our Post Graduate Program in Full-Stack Web Development or opt for our 90-day free Front-End Web Development Course for that. The programs provide several hours of learning materials with hands-on practical experience so you can quickly clear the fundamentals of all the front-end programming languages and master them. Upon course completion, you are rewarded a certification which you can include in your resume to improve your job prospects. Happy Learning!