CSS Links – A Guide

CSS allows developers to style links, making them more visually appealing and user-friendly.

Links (<a> elements) are an essential part of web navigation, and proper styling enhances usability, accessibility, and interaction.

What You Will Learn

1. Understanding HTML Links
2. Default Link Styles
3. Changing Link Colors with color
4. Styling Link States (hover, visited, active, focus)
5. Removing Underlines from Links (text-decoration)
6. Styling Hover Effects
7. Creating Button-Like Links
8. Adding Transition Effects to Links
9. Styling External and Internal Links Differently
10. Best Practices and Common Mistakes

1. Understanding HTML Links

A link (<a> tag) is used to navigate between webpages or different sections within the same page.

Example: Basic HTML Link

<a href="https://example.com">Visit Example</a>

By default, links appear blue and underlined, turning purple when visited.

2. Default Link Styles

Browsers apply default styles to links:

Link State	Default Style
Normal (a)	Blue with underline
Visited (a:visited)	Purple with underline
Hover (a:hover)	Darker blue
Active (a:active)	Red

3. Changing Link Colors with color

The color property changes the link’s text color.

Example: Changing Link Colors

a {
    color: green;
}

<a href="#">Green Link</a>

Applying Different Colors for Different States

a {
    color: blue;
}

a:visited {
    color: purple;
}

a:hover {
    color: red;
}

a:active {
    color: orange;
}

<a href="#">Styled Link</a>

• a – Normal link.
• a:visited – Link that has been clicked before.
• a:hover – Changes when the user hovers.
• a:active – Changes when the link is clicked.

4. Styling Link States (hover, visited, active, focus)

CSS provides pseudo-classes to define styles for different link interactions.

Link State Order (LVHA Rule)

Always follow this order:

1. a:link – Normal link.
2. a:visited – After clicking the link.
3. a:hover – When hovering over the link.
4. a:active – When the link is clicked.

a:link {
    color: blue;
}

a:visited {
    color: purple;
}

a:hover {
    color: red;
}

a:active {
    color: orange;
}

5. Removing Underlines from Links (text-decoration)

By default, links are underlined. Use text-decoration to remove or modify this.

Example: Removing Underlines

a {
    text-decoration: none;
}

<a href="#">No Underline</a>

Example: Adding Custom Underlines

a {
    text-decoration: underline dotted red;
}

6. Styling Hover Effects

Adding a hover effect makes links more interactive.

Example: Hover Effect with Background Change

a:hover {
    background-color: yellow;
    color: black;
}

Example: Hover Effect with Underline Animation

a {
    text-decoration: none;
    position: relative;
}

a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 100%;
    height: 2px;
    background: blue;
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

a:hover::after {
    transform: scaleX(1);
}

7. Creating Button-Like Links

You can style links to look like buttons.

Example: Button Style Link

.button {
    display: inline-block;
    background-color: blue;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
}

.button:hover {
    background-color: darkblue;
}

<a href="#" class="button">Click Me</a>

8. Adding Transition Effects to Links

Smooth transitions make link interactions more appealing.

Example: Smooth Color Change on Hover

a {
    color: blue;
    text-decoration: none;
    transition: color 0.3s ease-in-out;
}

a:hover {
    color: red;
}

• transition: color 0.3s ease-in-out; ensures a smooth color change.

9. Styling External and Internal Links Differently

You can differentiate between internal and external links using :not() and ::after.

Example: Mark External Links

a[href^="http"]:not([href*="mywebsite.com"])::after {
    content: " 🔗";
}

• Adds an external link icon for all non-internal links.

10. Best Practices and Common Mistakes

Best Practices

Use hover effects for better interaction.
Ensure color contrast for readability.
Differentiate visited and active links.
Use text-decoration: none; for button-like links.
Add transitions for smooth effects.

Common Mistakes and How to Fix Them

Mistake	Solution
Forgetting hover styles	Always define a:hover.
Not using text-decoration: none; for navigation links	Remove underline when making navigation links.
Using poor color contrast	Ensure good readability for all users.
Not following the LVHA order	Always use link → visited → hover → active.

Conclusion

• Use color and text-decoration for basic styling.
• Always follow the LVHA order (link → visited → hover → active).
• Remove underlines with text-decoration: none; when necessary.
• Apply hover effects and transitions for a smooth user experience.
• Style external and internal links differently for clarity.