Prev Next

HTML Links - Link Colors

By default, links are often blue and visited links are purple. With CSS, you can change the colors of different link states, such as hover or active. Customizing link colors improves aesthetics and can reinforce branding or context cues for users.

Key Topics

Basic Link Color Customization

Example: Using CSS pseudo-classes (:link, :visited, :hover, :active) to style link states.

a:link {
  color: blue;
}

a:visited {
  color: purple;
}

a:hover {
  color: red;
}

a:active {
  color: orange;
}

A Styled Links Page

This example shows how to integrate link color styling into a simple HTML page. Since this is a full HTML code demonstration, it is enclosed in a copy code box.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" >
    <meta name="viewport" content="width=device-width, initial-scale=1.0" >
    <title>Styled Links</title>
    <style>
        a:link {
            color: blue;
        }
        a:visited {
            color: purple;
        }
        a:hover {
            color: red;
        }
        a:active {
            color: orange;
        }
    </style>
</head>
<body>
    <h1>Check Out These Links</h1>
    <p><a href="https://example.com">External Link</a></p>
    <p><a href="about.html">Internal Link</a></p>
    <p>Hover over the links to see the color change.</p>
</body>
</html>

Explanation: The CSS rules above modify the link colors in different states, giving users visual feedback. Hover and active states guide user interactions, making the page feel more dynamic and responsive.

This demonstration applies link color styling within a navigation menu. Another full code sample is provided below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navigation Links</title>
    <style>
        nav a:link {
            color: darkblue;
        }
        nav a:visited {
            color: darkmagenta;
        }
        nav a:hover {
            color: darkred;
        }
        nav a:active {
            color: goldenrod;
        }
    </style>
</head>
<body>
    <nav>
        <a href="index.html">Home</a> | 
        <a href="services.html">Services</a> | 
        <a href="contact.html">Contact</a>
    </nav>
</body>
</html>

Explanation: Applying different link colors to a navigation bar helps users understand which links they've visited and provides a clear visual cue on hover. This contributes to a more intuitive user experience.

Key Takeaways

  • Use CSS pseudo-classes to style link states (:link, :visited, :hover, :active).
  • Changing link colors can improve branding and user guidance.
  • Hover and active states provide feedback, making navigation feel more interactive.
  • Apply different link styles in various contexts (main content, navigation) to improve clarity.
  • Keep contrast and accessibility in mind when choosing link colors.
Prev Next