Styling Links: Free HTML & CSS Tutorial

Topics covered in this HTML & CSS tutorial:

Styling the anchor tag, The :link, :visited, :hover, :focus, & :active pseudo-classes, Ordering link styles

Exercise Preview

Exercise Overview

In this exercise you’ll learn how to style links. The anchor tag has built-in style and functionality. When you code a link in HTML, the browser will render it with blue, underlined text. As a user clicks a link (for the brief moment the pointer is pressed down) the color will change to red. After a link has been visited, the browser changes the color to purple. These styles offer usability clues: “I’m a link, you can click on me” or “You already visited that page”. The browser’s default colors and underline do not suit every design, so we can change them.

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.

   If You Did Not Do the Previous Exercises (3A–3D)

   1. Close any files you may have open.
   2. On the Desktop, go to Class Files > Web Dev Class.
   3. Delete the Revolution Travel folder if it exists.
   4. Duplicate the Revolution Travel Ready for Styling Links folder.
   5. Rename the folder to Revolution Travel.

Creating a New Rule for the Anchor Tag

Let’s begin by creating a new, default style for all links on the page. Links are coded with the anchor tag <a>, so we can target them with a tag selector.

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. Let’s see how to style specific states of the anchor tag. Leave this page open in the browser so you can reload the page as you work.

Pseudo-Classes

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. 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.

Order Matters

We had you write the anchor rules in a specific order, because that order is important. Let’s investigate.

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. Why is this?

   Browsers read rules from the top down. All of these rules have the same level of specificity, so the color for :visited is overriding the color for :hover. The order of link styles in the code matters! When out of order they may not work properly. The correct order is:

   • a:link
   • a:visited
   • a:hover
   • a:focus (We’ll cover this a little later in this exercise.)
   • a:active

   A mnemonic that may help you to remember the order is Lord Vader Hates Furry Animals. Some people use LoVe HAte, although that doesn’t include focus.

5. Return to your code editor and undo the change, so your stack of link styles looks 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 make the code a little simpler. The :link pseudo-class does not really need to be stated directly. We can get the same results if we target all links/states and then add the rules for the specific :visited, :active, and :hover states. Streamline the first link style by deleting the :link part, as shown below:

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

7. We don’t actually want to change the active color to green. Instead, let’s just remove the underline that is added by the hover state. Delete color from the a:active rule and add the following code shown in bold:

   a:active {
      text-decoration: none;
   }
   

8. Save the file and preview it in Chrome. We want to use Chrome so we can test something specific.

9. In Chrome, do the following:

   • Hover over some links (visited or not) and notice the orange hover color is working properly again.
   • Press down on a link to see the active appearance (the underline should be removed). Then click the browser’s Back button to go back to the sanfran page.
   • Reload the page (sanfran.html).
   • Press the Tab key and notice that an outline will appear around a link (which should be the logo image).
   • Hit Tab again several times to see the outline appear around the text links. Notice that the link with the outline doesn’t look any different, except for the outline. This is called the focus state, and we can style it as well.

The Focus Pseudo-Class & Grouped Selectors

1. Return to your code editor.

2. We could make a whole new appearance and new CSS rule for the focus state (like we have for the visited, hover, etc. states), but we typically don’t want to have to design yet another state for such a fleeting appearance most people barely notice. So let’s just make the focus state look the same as the hover state. In CSS you can apply a rule to multiple elements or states. For example if you want to style h1 and h2 tags, you’d write the selector as h1, h2 (just like you write lists in English). After a:hover, add a comma and a:focus as shown below in bold:

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

3. Make sure you did not miss the comma between a:hover and a:focus in the code you just edited!
4. Save the file and preview it in Chrome.
5. Hit Tab several times until the outline appears around the text links. Now the text link that has focus (the one with the outline) should also be orange with an underline. This helps draw even more attention to it.

6. You can keep sanfran.html open in the browser and the code editor. You’ll continue with this file in the next exercise.