CSS provides properties to style and customizes the appearance of hyperlinks, allowing you to differentiate them from regular text and provide visual feedback to users.

Links can be styled with any CSS property (e.g. color, font-family, background, etc.).

Let’s explore how to use CSS to style links and make them visually appealing.

Link Color

The color property is used to set the color of unvisited links. You can specify the color using color names, hexadecimal notation, RGB or RGBA notation, or HSL or HSLA notation. Here’s an example:

a {
  color: blue;
}

Visited Link Color

The color property can also be used to set the color of visited links. By applying the:visited pseudo-class selector, you can target links that have been previously visited by users. Here’s an example:

a:visited {
  color: purple;
}

Hover and Active Link Color

You can use the :hover and:active pseudo-class selectors to apply styles when the user hovers over or clicks on a link, respectively. This allows you to provide visual feedback and enhance the interactive experience. Here’s an example:

a:hover {
  color: red;
}

a:active {
  color: green;
}

/* unvisited link */
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: blue;
}

Text Decoration

The text-decoration property is used to add visual effects to links, such as underlining or removing the underline. Here’s an example:

a {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:active {
  text-decoration: underline;
}

More Examples

a.one:link {color: #ff0000;}
a.one:visited {color: #0000ff;}
a.one:hover {color: #ffcc00;}

a.two:link {color: #ff0000;}
a.two:visited {color: #0000ff;}
a.two:hover {font-size: 150%;}

a.three:link {color: #ff0000;}
a.three:visited {color: #0000ff;}
a.three:hover {background: #66ff66;}

a.four:link {color: #ff0000;}
a.four:visited {color: #0000ff;}
a.four:hover {font-family: monospace;}

a.five:link {color: #ff0000; text-decoration: none;}
a.five:visited {color: #0000ff; text-decoration: none;}
a.five:hover {text-decoration: underline;}

Cursor Style

The cursor property allows you to change the appearance of the cursor when hovering over a link. It can be used to provide visual cues and indicate interactivity. Here’s an example:

a:hover {
  cursor: pointer;
}

This example demonstrates the different types of cursors (which can be useful for links):

<span style="cursor: auto">auto</span><br>
<span style="cursor: crosshair">crosshair</span><br>
<span style="cursor: default">default</span><br>
<span style="cursor: e-resize">e-resize</span><br>
<span style="cursor: help">help</span><br>
<span style="cursor: move">move</span><br>
<span style="cursor: n-resize">n-resize</span><br>
<span style="cursor: ne-resize">ne-resize</span><br>
<span style="cursor: nw-resize">nw-resize</span><br>
<span style="cursor: pointer">pointer</span><br>
<span style="cursor: progress">progress</span><br>
<span style="cursor: s-resize">s-resize</span><br>
<span style="cursor: se-resize">se-resize</span><br>
<span style="cursor: sw-resize">sw-resize</span><br>
<span style="cursor: text">text</span><br>
<span style="cursor: w-resize">w-resize</span><br>
<span style="cursor: wait">wait</span>

Conclusion

CSS link styles are crucial for enhancing the user experience and providing visual feedback. By using properties like color, text-decoration, and cursor, you can customize the appearance of links, including their color, underlining, and cursor style. Additionally, pseudo-class selectors such as:visited, :hover, and :active enable you to apply specific styles based on the link’s state. Experiment with different styles and techniques to create visually appealing and user-friendly links on your web pages.