❮ Previous Next ❯

CSS Links

  • Learn CSS to style links with colors, hover effects, and different states.

  • What Are CSS Links ?

    Links (<a> tags) are one of the most important elements on a website.
    They allow users to:

    • Navigate between pages
    • Open documents or resources
    • Perform actions (login, read more, buy now)

    In simple words:

    Links are the roads of a website - CSS decides how those roads look and respond.

    Without links, a website is just a static page.

    Why Styling Links Is Important

    Visual Feedback for Users

    Link styles help users understand:

    What is clickable
    What has already been visited
    What is currently being interacted with

    Without visual feedback:

    Users get confused
    Navigation feels broken
    Website feels unreliable

    Real-life comparison:
    A button that lights up when pressed gives confidence that it works.

    Better Navigation Experience

    Good link styling:

    Improves usability
    Makes navigation intuitive
    Builds user confidence

    Real-life comparison:
    Road signs and traffic signals guide drivers safely and clearly.

    Link States in CSS 

    CSS provides four main link states.
    Each state represents a different user interaction.

    :link - Normal Link State

    What it represents:

    A link that has not been visited yet.

:link Pseudo-Class

:link styles a hyperlink that has not been visited yet. 

a:link {
  color: blue;
}

  • :visited - Visited Link State

    What it represents:

    A link that the user has already clicked.

:visited Pseudo-Class

:visited styles a hyperlink that has already been clicked by the user. 

a:visited {
  color: purple;
}

  • Helps users remember visited pages

    Real-life comparison:
    A completed item in a to-do list.

    :hover - Mouse Over State

    What it represents:

    When the user moves the mouse over a link.

:hover Pseudo-Class

:hover styles an element when the user moves the mouse over it. 

a:hover {
  color: red;
  text-decoration: underline;
}

  • Confirms clickability
    Gives instant feedback

    Real-life comparison:
    A button highlighting when your finger moves closer.

    :active - Clicked State

    What it represents:

    When the link is being clicked (mouse button pressed).

:active Pseudo-Class

:active styles a link while it is being clicked (when the mouse button is pressed). 

a:active {
  color: green;
}

  • Shows interaction in progress

    Real-life comparison:
    A doorbell changing state while being pressed.

    Correct Order of Link States

    CSS link states must follow a specific order

    :link → :visited → :hover → :active

    Wrong Order (may not work correctly)

    a:hover { }

    a:link { }

    Correct Order

    a:link {

      color: blue;

    }

    a:visited {

      color: purple;

    }

    a:hover {

      color: red;

    }

    a:active {

      color: green;

    }

    Styling Links

    Removing Default Underline

    By default, links are underlined.

Removing Default Link Underline

Links are underlined by default, and text-decoration: none; removes the underline. 

a {
  text-decoration: none;
}

  • Cleaner, modern look

    Real-life comparison:
    Removing unnecessary markings from text.

    Adding Padding to Links (Better UX)

Adding Padding to Links

Adding padding to links increases the clickable area and improves user experience. 

a {
  padding: 8px 12px;
}

  • Larger clickable area
    Better accessibility

    Real-life comparison:
    Large buttons are easier to press than tiny ones.

    Button-Like Links

Creating Button-Style Links

You can style an anchor () tag like a button using background color, padding, and border-radius. 

<!DOCTYPE html>
<html>
<head>
    <title>Button Like Link</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 40px;
        }

        .btn {
            text-decoration: none;
            background-color: #1a73e8;
            color: white;
            padding: 10px 16px;
            border-radius: 6px;
            display: inline-block;
        }

        .btn:hover {
            background-color: #1558b0;
        }
    </style>
</head>
<body>
    <a href="#" class="btn">Read More</a>
</body>
</html>

  • Looks like a button
    Behaves like a link
    Common in real websites

    Accessibility & Focus State

    Links must also be usable by keyboard users.

Focus State for Accessibility

:focus styles links when selected using the keyboard, improving accessibility and usability. 

a:focus {
  outline: 2px solid orange;
}

  • Improves accessibility
    Required for good UX

    Real-life comparison:
    A visible cursor while typing with a keyboard.

    Never remove focus styles without adding a custom one.

Complete Link Styling Example

This example demonstrates how to style navigation links using hover and active states for better interaction. 

<!DOCTYPE html>
<html>
<head>
    <title>Navigation Link Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 40px;
        }

        nav a {
            text-decoration: none;
            color: #333;
            margin-right: 15px;
            padding: 6px 10px;
            display: inline-block;
        }

        nav a:hover {
            color: white;
            background-color: #333;
        }

        nav a:active {
            background-color: black;
        }
    </style>
</head>
<body>
    <nav>
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
    </nav>
</body>
</html>

  • Clear navigation
    Smooth interaction feedback
    Professional appearance
    Easy to use

    Common Mistakes

    Removing hover effects
    Ignoring visited state
    Not following LVHA order
    Removing focus outline without replacement

    Best Practices for CSS Links

    Always show hover feedback
    Keep visited links visually distinct
    Increase clickable area using padding
    Maintain focus styles for accessibility
    Keep link styles consistent across the site

    Links are the navigation system of a website.

    • Roads → links
    • Signals → styles
    • Feedback → user confidence

    Good styling = smooth navigation experience.

    CSS links have four interaction states
    Each state represents user behavior
    Correct order is essential
    Visual feedback improves navigation
    Well-styled links create better UX


❮ Previous Next ❯