Styling Links: Free HTML & CSS Tutorial

Topics Covered in This HTML & CSS Tutorial:

Master anchor tag styling through pseudo-classes (:link, :visited, :hover, :focus, & :active), understand the critical importance of proper link style ordering, and implement professional link interactions that enhance user experience.

Exercise Preview

Exercise Overview

Link styling is fundamental to creating professional, accessible web experiences. The anchor tag comes with built-in browser defaults: blue text with underlines for unvisited links, red during the brief active state when clicked, and purple for previously visited pages. These conventions, established in the early days of the web, provide essential visual feedback that helps users navigate confidently.

However, modern web design demands more sophisticated link styling that aligns with brand identity while maintaining usability principles. In this exercise, you'll learn to override browser defaults strategically, creating custom link states that guide users intuitively through your content while preserving the accessibility cues that make the web navigable.

1. If you completed the previous exercise, sanfran.html should still be open, and you can skip the following sidebar. If you closed sanfran.html, re-open it now from the Revolution Travel folder. We recommend you finish the previous exercises (3B–4A) before starting this one. If you haven't finished them, do the following sidebar.

   Browser Default Behavior

   Browsers automatically style links with blue underlined text, changing to red when clicked and purple after being visited. These defaults provide usability cues but may not match your design requirements.

Creating a New Rule for the Anchor Tag

Professional web development starts with establishing baseline styles that create visual consistency across your site. Links are coded with the anchor tag <a>, making them perfect candidates for tag selectors that apply universal styling rules.

1. In the styles at the top of sanfran.html add the following new rule just below the rule for p, like so:

   p {
      line-height: 24px;
      margin-bottom: 22px;
   }
   a {
      color: #13aad7;
      text-decoration: none;
   }

2. Save the file and preview it in a browser to see that the links should now be a lighter blue that matches the logo. We've also removed the underlines that links have by default.
3. Click on a couple of the navigation links, like Tour Packages or Travel Tips. Hit the browser's Back button each time to return to the sanfran page.

4. Notice that the link style on sanfran.html is always blue with no underline. This static appearance loses important user feedback. Let's implement dynamic link states that respond to user interaction while maintaining design coherence. Leave this page open in the browser so you can reload the page as you work.

Pseudo-Classes: The Foundation of Interactive Design

Pseudo-classes represent one of CSS's most powerful features, allowing you to target elements based on their state or position rather than just their HTML structure. For links, pseudo-classes enable sophisticated user interface feedback that guides visitors through your content intuitively.

1. Return to sanfran.html in your code editor.

2. As shown below, add the :link pseudo-class to the anchor tag rule you just wrote:

   a:link {
      color: #13aad7;
      text-decoration: none;
   }

   NOTE: We added a pseudo-class to the a tag, targeting specific functionality of that element. Pseudo-classes begin with a colon (:) and are written next to the element you want to target, with no space between the element and the pseudo-class.

3. Save the file and preview it in a browser.
4. Notice that links you already visited are now purple (the default color for visited links). That's because the :link pseudo-class tells the browser to only style links before they have been visited. Let's create our own style for visited links to override the default purple color.
5. Return to sanfran.html in your code editor.

6. Just below the a:link rule, add the following bold rule:

   a:link {
      color: #13aad7;
      text-decoration: none;
   }
   a:visited {
      color: #aaa;
   }

7. While we're here, let's add another rule to set the style of the link when a visitor presses down on the link. The active state provides immediate tactile feedback, confirming that the user's click has registered. Below the a:visited rule, add the following bold rule:

   a:visited {
      color: #aaa;
   }
   a:active {
      color: #2d4;
   }

8. Save the file and preview it in a browser.
9. The visited links should now be gray. Click and hold on any link to see that the active color changes to green.
10. If you were taken to another page, hit the browser's Back button to return to the sanfran page.
11. Let's create a style for when a user is hovering over a link. Return to sanfran.html in your code editor.

12. Below the a:visited rule, add the following bold rule:

    a:visited {
       color: #aaa;
    }
    a:hover {
       color: #e45c09;
       text-decoration: underline;
    }
    a:active {
       color: #2d4;
    }

13. Save the file and preview it in a browser.

14. Hover over the links to see they become orange (which matches the logo) and underlined. This hover state creates anticipation and confirms the element's interactive nature before the user commits to clicking.

Order Matters: Understanding CSS Specificity and the Cascade

CSS's cascading nature means that rule order directly impacts which styles take precedence. For link pseudo-classes, this becomes critical because a single element can match multiple selectors simultaneously. Understanding this concept is essential for creating predictable, professional interfaces.

1. Return to sanfran.html in your code editor.

2. Cut and paste the a:hover rule above the a:visited rule, so you end up with the following:

   a:link {
      color: #13aad7;
      text-decoration: none;
   }
   a:hover {
      color: #e45c09;
      text-decoration: underline;
   }
   a:visited {
      color: #aaa;
   }
   a:active {
      color: #2d4;
   }

3. Save the file and preview it in a browser.

4. Hover over some links and notice that when hovering over visited links, the underline appears, but the text remains gray instead of turning orange. This demonstrates a critical CSS principle in action.

   When multiple rules have equal specificity, browsers apply the last one encountered in the code. Since visited links match both the :hover and :visited pseudo-classes, and :visited comes after :hover in our current order, the visited color overrides the hover color. The correct order for link pseudo-classes is:

   • a:link • a:visited • a:hover • a:focus • a:active

   A mnemonic that may help you remember this sequence is Lord Vader Hates Furry Animals. Some developers use LoVe HAte, though this omits the important focus state.

5. Return to your code editor and restore the proper order, so your link styles look like this:

   a:link {
      color: #13aad7;
      text-decoration: none;
   }
   a:visited {
      color: #aaa;
   }
   a:hover {
      color: #e45c09;
      text-decoration: underline;
   }
   a:active {
      color: #2d4;
   }

6. Let's optimize our code for better maintainability. The :link pseudo-class specifically targets unvisited links, but we can achieve cleaner code by targeting all anchor elements as a base, then overriding specific states. Simplify the first rule by removing the :link portion:

   a {
      color: #13aad7;
      text-decoration: none;
   }
   a:visited {
      color: #aaa;
   }
   a:hover {
      color: #e45c09;
      text-decoration: underline;
   }
   a:active {
      color: #2d4;
   }

7. Let's refine the active state for better user experience. Rather than introducing another color, we'll focus on providing clear interaction feedback by removing the underline added by the hover state. Modify the a:active rule as follows:

   a:active {
      text-decoration: none;
   }

8. Save the file and preview it in Chrome. We're using Chrome specifically to test keyboard navigation features.

9. In Chrome, test the complete interaction flow:

   • Hover over various links to confirm the orange hover state works correctly for both visited and unvisited links.
   • Click and hold on a link to observe the active state (underline should disappear momentarily), then use the browser's Back button to return to the sanfran page.
   • Reload the page to reset focus, then press the Tab key. Notice the outline appearing around the logo image.
   • Continue pressing Tab to cycle through the text links. The browser outline indicates keyboard focus—a critical accessibility feature for users who navigate without a mouse.

The Focus Pseudo-Class & Grouped Selectors: Optimizing for Accessibility

Keyboard navigation is essential for web accessibility, supporting users with motor disabilities and power users who prefer keyboard shortcuts. The focus state deserves the same design attention as hover states, ensuring your site remains fully functional across all interaction methods.

1. Return to your code editor.

2. Rather than creating a separate rule for focus, we'll group it with the hover state for consistent visual feedback. CSS allows multiple selectors to share the same rule by separating them with commas. Modify the hover rule to include focus as shown:

   a:hover, a:focus {
      color: #e45c09;
      text-decoration: underline;
   }

3. Double-check that you included the comma between a:hover and a:focus—without it, CSS will interpret this as a descendant selector rather than a grouped selector.
4. Save the file and preview it in Chrome.
5. Test the keyboard navigation by pressing Tab repeatedly until focus reaches the text links. The focused link should now display the same orange color and underline as the hover state, creating consistent feedback regardless of how users interact with your content.

6. Keep both sanfran.html and your browser open—you'll continue building on this foundation in the next exercise, where we'll explore advanced link styling techniques and responsive design considerations.