CSS Links

Links (<a> tags) are the core elements of web interaction. By default, links have different appearances in different states. Using CSS, we can fully customize the style of links to better integrate them into the website's design.

Link States

Links have four basic states, and we can use Pseudo-classes to style each state individually:

1. :link: Normal state, a link that has not been visited yet.
2. :visited: A link that has been visited by the user.
3. :hover: A link that the mouse pointer is hovering over.
4. :active: A link that the user is clicking (the state between mouse press and release).

/* Unvisited link */
a:link {
  color: #1a0dab;
  text-decoration: underline;
}

/* Visited link */
a:visited {
  color: #660099;
}

/* Mouse over link */
a:hover {
  color: #ff0000;
  text-decoration: none;
}

/* Selected link */
a:active {
  color: #0000ff;
}

LVHA Order

When styling links, be sure to follow the L-V-H-A order: :link -> :visited -> :hover -> :active.

This is due to CSS cascading rules. If the order is incorrect, some styles may be overridden. For example, if :hover is placed before :visited, the :visited rule will override the :hover rule when hovering over a visited link, causing the hover effect to fail.

text-decoration

The text-decoration property is often used to control the underline of links.

/* Remove underlines from all links */
a {
  text-decoration: none;
}

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

This is a very common design pattern that clearly indicates to the user that this is a clickable link while keeping the interface clean.

background-color

We can also change the background color of links to create button-like effects.

a.button {
  display: inline-block; /* Make the a tag behave like a block-level element, allowing width, height, margin and padding */
  padding: 10px 20px;
  background-color: #4CAF50; /* Green */
  color: white;
  text-align: center;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease; /* Add smooth transition effect */
}

a.button:hover {
  background-color: #45a049;
}

cursor

The cursor property can change the style of the mouse pointer when hovering over an element. Links default to pointer (hand shape). You can modify it as needed, for example, for a disabled link, you can set it to not-allowed.

a.disabled {
  cursor: not-allowed;
  opacity: 0.6;
  pointer-events: none; /* Disable all mouse events */
}

By setting appropriate styles for different states of links, you can provide clear visual feedback to users, greatly improving the usability and user experience of the website.