Textual links, also known as hyperlinks, are a fundamental part of web design, connecting various web pages and sections within a page. They are designed to stand out by default, typically appearing as underlined blue text for unvisited links and purple for visited links. This visual differentiation promotes clickability and helps users navigate web content effectively.
CSS (Cascading Style Sheets) allows for extensive customization of these default styles, enabling designers to create a cohesive and visually appealing web experience. In this detailed guide, we will explore the various states of links and how to style them using CSS
Description: This is the default state of a hyperlink before it has been clicked by the user.
Default Style: Typically blue and underlined, indicating that the link is clickable.
Description: This state applies to links that have been clicked and visited by the user.
Default Style: Usually displayed in purple to indicate the link has been previously clicked.
Description: This state occurs when the user places the mouse pointer over the link.
Default Style: Changes in color and sometimes underlined to indicate interactivity.
Description: This state represents the link while it is being clicked by the user.
Default Style: Often displayed in a different color to show the link is being actively selected.
Description: This state occurs when a link has focus, such as when it is navigated to using keyboard controls.
Default Style: Usually an outline around the link to enhance accessibility.
Underlined link: By default, links are underlined to indicate that they are clickable.
Symbol changes to a hand: When hovered over, the cursor changes to a hand to indicate interactivity.
Unvisited links are blue: Links that haven't been clicked are displayed in blue.
Visited links are purple: Links that have been clicked are displayed in purple.
Active links are red: While being clicked, links are shown in red.
Focused links have an outline: Links that have focus are surrounded by an outline for better visibility.
<!DOCTYPE html>
<html>
<head>
<title>CSS Link Styling</title>
</head>
<body>
<h2>CSS Link Styling Example</h2>
<p>
<a href="https://waytocode.in/" style="color: blue; text-decoration:
underline;">Unvisited Link Example</a>
</p>
<p>
<a href="https://waytocode.in/" style="color: purple; text-decoration:
underline;">Visited Link Example</a>
</p>
<p>
<a href="https://waytocode.in/" onmouseover="this.style.color='green'"
onmouseout="this.style.color='blue'" style="text-decoration: underline;">Hover Link
Example</a>
</p>
<p>
<a href="https://waytocode.in/" onmousedown="this.style.color='red'"
onmouseup="this.style.color='blue'" style="text-decoration: underline;">Active Link
Example</a>
</p>
<p>
<a href="https://waytocode.in/" style="outline: 2px solid black;
text-decoration: underline;">Focus Link Example</a>
</p>
</body>
</html>