CSS Hyperlink

by

Di bab delapan kali ini, saya ingin membahas tentang cara mengatur style hyperlink html dengan CSS.

Mengapa perlu diberi style? Sebelum menjawabnya, ada empat selektor css link yang harus kamu pahami. Yaitu:

  • a:active link yang sedang dibuka saat ini
  • a:hover ketika cursor diarahin ke link
  • a:link keadaan normal (belum di klik / tidak diarahin cursor) ketika teks ada linknya
  • a:visited ketika link sudah pernah diklik

Empat tadi sangat penting untuk dibedakan, guna meningkatan User eXperiences pengguna. Bayangin, ketika semua warna link sama? Tentu kita akan mengalami kesulitan untuk mencari mana link atau mencari mana link yang sudah dibuka.

Setiap selector diatas, dapat diberi properti css teks atau css font pada umumnya, seperti color, font-family, font-size, background, margin atau padding, dll.

Jadi, untuk membedakannya cukup berikan properti-properti yang berbeda untuk setiap tipenya.

Berikut contoh implementasi css link.

Supaya lebih mudah, langsung praktik saja. Berikut saya punya file html belajar.html.

<!DOCTYPE html>
<html>
<head>
	<title>Belajar Link HTML CSS</title>
	<link rel="stylesheet" type="text/css" href="belajar_style.css">
</head>
<body>
	<a href="https://halamansatu.biz/">Klik disini</a>
	<p>Ini akan ada efeknya setelah ada aksi (diarahin kursor dan diklik)</p>
</body>
</html>

Sedangkan file CSSnya adalah:

/* link yang belum diklik*/
a:link {
  color: red;
}

/* link yang udah diklik*/
a:visited {
  color: green;
}

/* kursor mengarah ke link */
a:hover {
  color: pink;
  font-size: larger;
}

/* link yang sedang dibuka*/
a:active {
  color: blue;
}

Hasilnya sebagai berikut:

Klik disini

Ini akan ada efeknya setelah ada aksi (diarahin kursor dan diklik)

Coba kamu arahin kursornya, trus di klik. Nanti akan ada efek-efek yang berbeda. Supaya kamu lebih jelas, saya perlihatkan gambar efek tiap actionnya:

Gambar 1: ketika link belum diapa-apain. Masih orisinal.

Gambar 2: ketika dihover atau diarahin cursor ker linknya.

Gambar 3: ketika link sudah diklik.

Yang ketika link aktif tidak saya tampilin, karena linknya mengarah ke website ini.

Penulisan CSS Link dengan ID dan Class

Semakin kompleksnya website, tentu akan ada banyak ID dan class yang digunakan, termasuk penggunaan link.

Perlu dibedakan style link untuk menu navigasi dan link di postingan atau artikel.

Karena itu dibutuhkan id dan class untuk membedakannya. ID dan class html ditulis di linknya, dengan format:

<a id="nama_id" class="nama_class" href="#">Link</a>

ID dan class dapat ditulis bersamaan, bisa ditulis salah satu. Tapi formatnya seperti itu.

Kemudian penulisan css untuk id dan class seperti ini:

Untuk id:

a#nama_id:link {}
a#nama_id:visited {}
a#nama_id:hover {}
a#nama_id:active {}

Untuk class:

a.nama_class:link {}
a.nama_class:visited {}
a.nama_class:hover {}
a.nama_class:active {}

Sekian tutorial mengatur style hyperlink di css. Semoga cukup jelas!

Leave a Comment