We generally add links in between the text on a webpage which in an actual sense creates a web and we get WorldWideWeb, right? Garlikov explains how links can be used to relate various ideas and set the navigation for different topics.
No wonder, Springer calls links the “essence” of the online web.
Now, in this article, we will learn ways to add one or more links. We will also learn how to style and decorate the link, create a button around the link and distinguish the link based on hover effect, or link which has been opened once by the user.
We will begin with a simple code where we shall add two links and differentiate it with two different colors. The CSS id as an attribute to <a> tag will help us reach there.
Let’s check the code and then discuss it.
Code:
<html> <head> <title> How to add links in CSS </title> </head> <body> The following two links have different colors because of CSS <p> <strong> <a href="https://www.inserthtml.com"> Learn HTML with article type tutorials </a> <br> <a href="https://cssnewbie.com" id="check"> Learn CSS styling with articles </a> </strong> </p> </body> </html>
CSS File:-
a {
color: blue;
}
#check{
color:red;
}
Here’s what the output will be:
The property color has been used in the CSS file to add and change the color of the link. It should be used to differ the link from the rest of the text and help the user to navigate to a page. Such link building also drives traffic or can be used to create a sales funnel which is a well-planned chain of web pages to drive a customer.
Moving on, we will learn about four states of any link.
- a: link
- a:visited
- a:hover
- a:active
The first state is how the link is displayed on a webpage. The second state is the action on the link like changing the color of it once it has been visited. The third state changes the color or shows an underlined text when the cursor moves over it and the last state is when the link is finally clicked.
Remember not to change the sequence of these states is equally important and should be followed each time. I would encourage you to copy-paste the code on CodePen as the output is responsive.
<html> <head> <title> How to add links in CSS </title> </head> <body> <p> <strong> <a href="https://cssnewbie.com" target="_blank"> Hover over me to change the color to green </a> </strong> </p> </body> </html>
CSS Filename:
a{
font-size: 50px;
}
a:link {
color: grey;
}
a:visited {
color: lightblue;
}
a:hover {
color: green;
}
a:active {
color: violet;
}
Link Buttons
The links can be converted into buttons which can be colorful enough to compel the reader to tap it. This is especially helpful when you are creating a ‘Call To Action’ and want to drive your website visitors to that button.
To achieve this we use properties like padding, background-color, and text-decoration. In the following code, we have used these properties where text-decoration value is none for the first two states and underline for hover which again gives a response to the reader.
The size of the button shape visible can be altered with the help of padding. Let’s check the code and explore it further here.
<html> <head> <title> How to add links in CSS </title> </head> <body> <h1> Buttons of links </h1> <p> The following button will take you to learn CSS and the button helps in highlighting </p> <br> <a href="https://cssnewbie.com"> Learn CSS </a> </body> </html>
CSS File:
a:link, a:visited {
background-color: green;
color: lightblue;
padding: 18px 64px;
text-align: center;
text-decoration: none;
}
a:hover{
text-decoration: underline;
background-color: blue;
}
a:active {
background-color: red;
}
Here’s how the output will be:
Conclusion
In this guide, we learned how to add links in CSS. We also learned different kinds of links and different states of links.
Links are an essential part of the World Wide Web, and if used correctly by a web developer it can help drive traffic.
To learn such other CSS techniques, subscribe to our blog!
To see how to add forms in CSS, visit our previous article!