Introduction
The written links are styled with color and emphasis to draw visual focus, akin to how artwork is bordered to elevate its appearance and for decorative purposes. HTML/CSS guidelines dictate that visited hyperlinks should have a default underline, encouraging interaction and interaction with online content, serving multiple purposes. Instances of digital platforms encompass E-commerce platforms, search engine result pages, communication portals, knowledge repositories, news websites, video archives, table of contents, and more.
Additionally, if you are a front-end web developer dissatisfied with the visual consistency of your bespoke website due to inconsistent text styles or if you are striving to eliminate the inconsistencies caused by underlined hyperlinks, this guide will effectively present the solutions for you.
What is a Link in CSS?
A hyperlink, commonly referred to as a link, serves as a bridge between different web pages or sections within a single webpage. In HTML, the tag represents a hyperlink, with the "href" attribute specifying the target URL. It is mandatory as per the HTML standard that the text of a hyperlink retains its distinctive appearance regardless of its state. Browsers typically recognize links in one of four states - unvisited, visited, hover, or active - simultaneously. To surpass this limitation, various CSS styles can be applied.
Consequently, links are formatted using the CSS property. Additionally, different link states can be customized by specifying pseudo-classes.
We can navigate between pages by clicking on hyperlinks. When clicked, hyperlinks are styled with blue and purple underlines in their most basic representation. Consequently, even without any CSS styling, hyperlinks in HTML appear noticeably distinct from regular text.
Link Values by Default
- Underlined link
- When hovered over, the symbol changes to a hand.
- Unvisited links are blue.
- Links that have been visited are highlighted in purple.
- Active links are shown in red.
- An outline surrounds focused links.
But why settle for the default appearance? Why not customize the appearance of links on every webpage? The standard design might not always match the background color or pattern. As demonstrated in this article, you can quickly customize the links using CSS in any of these scenarios. However, before we delve deeper into styling, let's explore the different states of CSS links that we can customize.
Different CSS Link States
CSS links have several states. The states describe how links change as a user interacts with them. For example, before clicking on the link, after clicking, when lingering over it, and so on. Here are the many states of CSS links.
- Link (a:link): The unvisited condition occurs when the user has not yet clicked on the link.
- Visited (a:visited): The condition in which the user has at least once viewed the link.
- Hover (a:hover): The mouse's condition when hovering over a link.
- Active (a:active): The state in which the link has been clicked but has not yet directed the user to the destination href URL.
- Focus (a:focus): The state in which the link is focused, such as when pressing the tab key on the keyboard to navigate.
Syntax of CSS Link
The syntax for using CSS links is:
a:link {
style code
}
CSS hyperlinks enable the application of foundational CSS properties. These properties encompass attributes like color, font type, text styling, background color, and more. The color property can be specified using the color's name, hexadecimal code, or RGB value. The text-decoration property controls the presence or absence of underlines in links. To remove underlines, set the text-decoration property value to 'none'. These properties will be employed consistently in all illustrations to format links in different conditions. Before that, let's create the HTML code that will serve as the foundation for all illustrations.
Code:
<html>
<head>
<title>Example for CSS links</title>
<style>
p {
font-size: 20px;
text-align: left;
}
</style>
</head>
<body>
<p>
<a href="https://www.youtube.com/">
Youtube Link
</a>
</p>
</body>
</html>
Output:
CSS Link Properties
The subsequent are fundamental CSS attributes related to hyperlinks:
- Color:
The color of the hyperlink text can be modified using this CSS attribute.
Syntax
a {
color: color_name;
}
This instance showcases how the color attribute is applied to hyperlinks.
<html>
<head>
<title>Example for Link color property</title>
<style>
p {
font-size: 30px;
text-align: left;
}
/*unvisited link will appear green*/
a:link {
color: green;
}
/*visited link will appear green*/
a:visited {
color: green;
}
/*when the mouse hovers over the link, it will appear orange*/
a:hover {
color: blue;
}
/*when the link is clicked, it will appear black*/
a:active {
color: blue;
}
</style>
</head>
<body>
<p>
<a href="https://www.youtube.com/">
Youtube
</a>
This link will change colors with different states.
</p>
</body>
</html>
Output:
- Font-family:
The font-family attribute is employed to adjust the font style of a hyperlink.
Syntax:
a {
font-family: "font-family name";
}
This illustration showcases how the font-family attribute is utilized in hyperlinks.
<html>
<head>
<style>
/*Initial link font family arial*/
a {
font-family: Arial;
}
p {
font-size: 20px;
text-align: left;
}
/*unvisited link font family*/
a:link {
color: Arial;
}
/*visited link font family*/
a:visited {
font-family: Calibri;
}
/*when the mouse hovers over, it will change to Times New Roman*/
a:hover {
font-family: Times New Roman;
}
/*when the link is clicked, it will change to Times New Roman*/
a:active {
font-family: Times New Roman;
}
</style>
</head>
<body>
<p>
<a href="https://www.youtube.com/" id="link">
Youtube
</a>
A youtube channel
</p>
</body>
</html>
Output:
- Text-Decoration:
This attribute removes or adds underlines from a hyperlink.
Syntax:
a {
text-decoration: none;
}
This illustration showcases how the text-decoration attribute is utilized in hyperlinks.
<html>
<head>
<title>Example for Text decoration in link</title>
<style>
/*Set the font size for better visibility*/
p {
font-size: 20px;
}
/*Removing underline using text-decoration*/
a {
text-decoration: none;
}
/*underline can be added using
text-decoration:underline;
*/
</style>
</head>
<body>
<p>
<a href="https://www.youtube.com/" id="link">
Youtube
</a>
an entertainment channel
</p>
</body>
</html>
Output:
- Background-color:
This attribute is utilized to define the background color of the hyperlink.
Syntax:
a {
background-color: color_name;
}
This illustration showcases how the background-color attribute is utilized in hyperlinks.
<!DOCTYPE html>
<html>
<head>
<title>Example for background color</title>
<style>
/*Setting font size for better visibility*/
p {
font-size: 20px;
}
/*Designing unvisited link button*/
a:link {
background-color: lightpink;
color: black;
padding: 3px 3px;
text-decoration: none;
display: inline-block;
}
/*Designing the link button when the mouse cursor moves over it*/
a:hover {
background-color: green;
color: white;
padding: 5px 5px;
text-align: left;
text-decoration: none;
display: inline-block;
}
</style>
</head>
<body>
<p>
<a href="https://www.youtube.com/" id="link">
Youtube
</a>
An entertainment channel
</p>
</body>
</html>
Output:
CSS Link Button
CSS links can also be personalized with buttons or boxes. An illustration below showcases the transformation of CSS links into button elements.
This instance illustrates how links can be utilized as buttons.
<!DOCTYPE html>
<html>
<head>
<title>Example for Link button</title>
<style>
/*Setting font size for better visibility*/
p {
font-size: 20px;
}
a {
background-color: lightblue;
color: yellow;
padding: 3px 3px;
border-radius: 6px;
text-align: left;
text-decoration: none;
display: inline-block;
}
</style>
</head>
<body>
<p>
<a href="https://www.youtube.com/" id="link">
Youtube
</a>
An entertainment channel
</p>
</body>
</html>
Output:
Here's a breakdown of all the anchor pseudo-classes used in the preceding example.
- a:link: It is used to style URLs that have not yet been viewed. It changes the text-decoration to none in this example, which removes the underline that is traditionally associated with links.
- a:visited: It is used to style previously visited URLs. In this scenario, the color indicates that the link has been followed.
- a:link: When the mouse pointer hovers over a link, it is styled with a:hover. This example changes the text decoration to underline and the color to purple, resulting in an underlining effect and altering the link color to purple.
- a:active: This class is used to style links when they are clicked.
The pseudo-classes :hover, :focus, and :active enable the customization of elements based on user interactions. The activation timing of these pseudo-classes varies depending on the device being used.
This highlights the importance of specifying these styles in the typical order of occurrence, ensuring users are aware of new interactions being recognized. Typically, a user will hover over an element, bring it into focus, and then activate it. Therefore, the recommended sequence for organizing your pseudo-class styles is to start with :hover, followed by :focus, and then :active.