How to style link in html

HtmlHow-ToBeginner · 3 min read

How to Style Links in HTML: Simple CSS Guide

To style a link in HTML, use the CSS a selector to target the link element and apply styles like color, text-decoration, and hover effects. You can write CSS rules inside a <style> tag or an external stylesheet to change how links look on your webpage.

📐

Syntax

Use the a selector in CSS to style all links. You can also use pseudo-classes like :link, :visited, :hover, and :active to style links in different states.

a: targets all links
a:link: targets unvisited links
a:visited: targets visited links
a:hover: targets links when mouse is over
a:active: targets links when clicked

css

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

💻

Example

This example shows how to style links with blue color and underline by default, and change to red color without underline when hovered.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Styled Links Example</title>
  <style>
    a {
      color: blue;
      text-decoration: underline;
      font-weight: bold;
    }
    a:hover {
      color: red;
      text-decoration: none;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <p>Visit <a href="https://www.example.com">Example Website</a> to see the styled link.</p>
</body>
</html>

Output

A webpage with a blue, bold, underlined link labeled 'Example Website'. When the mouse moves over the link, it changes to red color and the underline disappears.

⚠️

Common Pitfalls

Common mistakes when styling links include:

Not using a:hover for hover effects, so links don't visually respond to mouse.
Overriding browser defaults without clear styles, making links hard to recognize.
Using text-decoration: none without other visual cues, causing accessibility issues.
Forgetting to style :visited links, which can confuse users about which links they clicked.

css

/* Wrong: no hover style, link looks static */
a {
  color: black;
  text-decoration: none;
}

/* Right: add hover style for feedback */
a:hover {
  color: green;
  text-decoration: underline;
}

📊

Quick Reference

Here is a quick guide to common CSS link styles:

Selector	Description	Example Style
a	All links	color: blue; text-decoration: underline;
a:link	Unvisited links	color: blue;
a:visited	Visited links	color: purple;
a:hover	Mouse over link	color: red; text-decoration: none;
a:active	Link being clicked	color: orange;

✅

Key Takeaways

Use the CSS a selector to style links in HTML.

Apply :hover to give visual feedback when users hover over links.

Keep links recognizable by using color and underline or other clear styles.

Style :visited links to help users track visited pages.

Avoid removing all link styles without adding other visual cues for accessibility.