CSS Links

Links can be styled with any CSS property (e.g., color, font-family, background). One of the most important aspects of link styling is using pseudo-classes to define different states of a link.

---

Link States (Pseudo-classes)

To style links based on user interaction (like hovering or clicking), we use these four pseudo-classes:

• a:link — A normal, unvisited link.
• a:visited — A link the user has visited.
• a:hover — A link when the user mouses over it.
• a:active — A link the moment it is clicked.

/* Order matters! LVHA rule */
a:link { color: red; }
a:visited { color: green; }
a:hover { color: hotpink; }
a:active { color: blue; }

---

Removing Underlines

By default, browsers underline all hyperlinks. You can use text-decoration: none; to remove the underline, which is often done for navigation menus.

a {
    text-decoration: none; /* Removes underline */
}

a:hover {
    text-decoration: underline; /* Shows underline only on hover */
}

---

Link Buttons

You can style links to look like physical buttons by using background colors, padding, and border-radius.

a {
    background-color: #2e7d52;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    display: inline-block;
    border-radius: 4px;
}

a:hover {
    background-color: #1b5e20;
}

---

Styling Cursor

The cursor property allows you to define the mouse cursor type when hovering over a link. While browsers use a 'pointer' cursor by default, you can change it for different behaviors.

a:active {
    cursor: wait; /* Mouse changes to a loading spinner */
}

---