Formatting Hyperlinks – CSS Styles for Links

Hyperlinks are a central element on the web. Every website uses them to link different content together and facilitate navigation. However, the standard design of links is often unappealing. Hyperlinks can be easily enhanced and made more user-friendly with CSS. In this guide, I will show you how to style the different states of links attractively using CSS.

Key insights

• There are three main states of links: normal, hover, and visited.
• CSS allows you to customize the appearance of these states.
• The use of the pseudo-classes:hover,:visited, and:active is essential for attractive styling.

Step-by-Step Guide

Basics of Link States

First, it's important to understand the three main states of hyperlinks:

1. Normal (unvisited)
2. Hover (when the mouse is over the link)
3. Visited (links that have already been visited)

To illustrate, visit any website, such as w3.org, and observe the behavior of the links. In the standard state, they appear in blue. After clicking, their color often changes to violet or purple, signaling that you have already visited the link.

CSS Selectors for Links

To style link states in CSS, you use the selectors a, a:hover, and a:visited.

• The a selector applies to the normal state.
• The a:hover selector handles the appearance when the user hovers over the link.
• The a:visited selector is used for links that have already been visited.

Adding Hover Effects

To enhance the user experience, you should add a hover effect. For instance, you can play with padding and change the background color when a link is hovered over. This gives the user visual feedback on where the mouse pointer is located.

Adjusting Text Decoration

Another way to improve link design is by adjusting the text-decoration. Instead of displaying the link with an underline all the time, you can activate the underline only when the user hovers over the link. This creates a modern and clean look.

a:hover { text-decoration: underline; }

Adding Active State

The state when a link is being clicked is defined by the a:active selector. This state indicates that the user is actively selecting the link.

Combining All States

Now you have covered all the necessary states for styling links.

a:visited { color: green; }

a:hover { background-color: #aaa; padding: 5px 15px; text-decoration: underline; }

a:active { background-color: lightgrey; }

Summary – Sprucing Up Hyperlinks with CSS

In this guide, you have learned how to effectively style the different states of hyperlinks using CSS. You now know that it's important to use the states:hover,:visited, and:active correctly to create an attractive and user-friendly web interface. With simple adjustments like color changes and padding, you can make links more appealing and intuitive.