Với CSS, các liên kết có thể được tạo kiểu theo nhiều cách khác nhau.

Tạo kiểu link

Các liên kết có thể được tạo kiểu bằng bất kỳ thuộc tính CSS nào (ví dụ: màu sắc, họ phông chữ, nền, v.v.).

a {
  color: hotpink;
}

Ngoài ra, các liên kết có thể được tạo kiểu khác nhau tùy thuộc vào trạng thái của chúng.

Bốn trạng thái liên kết là:

a:link – một liên kết bình thường, chưa được truy cập
a:visited – một liên kết mà người dùng đã truy cập
a:hover – một liên kết khi người dùng di chuột qua nó
a:active – một liên kết ngay khi nó được nhấp vào

/* 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

Thuộc tính text-trang trí chủ yếu được sử dụng để xóa phần gạch chân khỏi các liên kết:

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:active {
  text-decoration: underline;
}

Background Color

Thuộc tính màu nền có thể được sử dụng để chỉ định màu nền cho các liên kết:

a:link {
  background-color: yellow;
}

a:visited {
  background-color: cyan;
}

a:hover {
  background-color: lightgreen;
}

a:active {
  background-color: hotpink;
} 

Link Buttons

Ví dụ này minh họa một ví dụ nâng cao hơn trong đó chúng tôi kết hợp một số thuộc tính CSS để hiển thị các liên kết dưới dạng hộp/nút:

a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}