Key takeaways:
Understanding the various link states—default (a), visited (a:visited), hover (a:hover), active (a:active), and focus (a:focus)—allows you to create responsive navigation elements.
Proper ordering of CSS pseudo-classes—default, visited, hover, focus, active—ensures that styles are applied correctly without unintended overrides.
Implementing clear and visible focus styles for links is essential for users who rely on keyboard navigation or assistive technologies.
CSS provides the tools necessary to style HTML elements, including links, which are among the most interactive components on a webpage. Properly styled links not only guide users through your content but also enhance the overall aesthetic appeal of your site. In this answer, we will look at different ways that we can style links using CSS.
Links can exist in various states based on user interaction and browser history.
Default (a): Unvisited link.
Visited (a:visited): After a link has been visited.
Hover (a:hover): When a user hovers over the link.
Active (a:active): The moment the link is clicked.
Focus (a:focus): A link that is focused.
Let's discuss each state in detail with examples.
a styleThe a pseudo-class denotes a link that has not been visited yet. This is the default state of a link before any user interaction. It targets all unvisited links on a web page.
In the example below, all unvisited links are displayed in red without underlines, providing a clean and modern look.
a:visited styleThe a:visited pseudo-class targets links that the user has previously visited. This helps users distinguish between new and previously accessed pages.
In the example below, visited links will appear in a different color, helping users recognize which links they have already clicked and enhancing navigation efficiency.
Practice styling links by trying out this project, Build a Custom Form Maker with MERN Stack, where we create a full stack image-sharing application focusing on styling the application.
a:hover styleThe a:hover pseudo-class targets links when a user hovers over them with a cursor. This state is crucial for providing visual feedback during user interaction.
In the example below, when users hover over the link, it changes color and gets underlined, providing immediate visual feedback that the text is interactive.
a:active styleThe a:active pseudo-class targets links at the moment they are being clicked. This state provides real-time feedback during the click action.
In the example below, active links will momentarily change color when clicked, indicating the action is being performed and enhancing the user's sense of interaction.
a:focus styleThe a:focus pseudo-class targets links that are currently focused, such as when navigated via keyboard. This is essential for accessibility, ensuring users who rely on keyboard navigation can easily identify focused links.
In the example below, focused links will display an outline and background color change, making it clear which element is currently active, thereby improving accessibility for users with disabilities.
Want to get hands-on practice with CSS links in a real-world application? Try out this project, Build a Microblogging App Using PHP, HTML, JavaScript, and CSS, where we create a microblogging platform with search and admin features.
When styling link states, the order in which you define your CSS pseudo-classes is crucial to ensure that styles are applied correctly. The recommended order is—default, visited, hover, focus, active. This order prevents unintended overrides and maintains the intended styling hierarchy.
Note: CSS applies styles based on the cascade and specificity. If pseudo-classes are not ordered correctly, more specific styles may unintentionally override less specific ones, leading to inconsistent link behaviors.
Let's look at a complete example of this:
Haven’t found what you were looking for? Contact Us
Free Resources