Styling Links dengan CSS
Tautan memiliki empat status yang berbeda – link, visited, active dan hover. Keempat status tautan atau hyperlink ini dapat ditata secara berbeda melalui properti CSS menggunakan pseudo-classes dari elemen anchor, namun tergantung juga pada statusnya.
Inilah CSS pseudo-classes yang terkait dengan tag <a> HTML yang dapat kalian gunakan untuk menentukan style yang berbeda untuk berbagai status hyperlink.
- a:link — Digunakan untuk mengatur style untuk tautan normal atau belum dikunjungi yang tidak memiliki penunjuk (mouse pointer).
- a:visited — Digunakan untuk mengatur style untuk tautan yang dikunjungi pengguna tetapi tidak memiliki penunjuk (mouse pointer).
- a:hover — Digunakan untuk mengatur style untuk tautan saat pengguna menempatkan pointer mouse di atasnya.
- a:active — Digunakan untuk mengatur style untuk tautan yang sedang dalam proses diklik.
Kalian dapat menentukan properti CSS apa pun yang kalian inginkan, misal warna, font-family, background, dll untuk masing-masing selector untuk mendefinisikan kembali style tautan, seperti yang kalian lakukan dengan teks normal. Berikut contohnya:
a:link { /* unvisited link */
color: #FF0000;
text-decoration: none;
}
a:visited { /* visited link */
color: #00FF00;
}
a:hover { /* mouse over link */
color: #FF00FF;
text-decoration: underline;
}
a:active { /* active link */
color: #0000FF;
}
Susunan saat kalian mengatur style untuk beberapa status tautan adalah penting, karena apa yang didefinisikan terakhir lebih diutamakan daripada kode CSS sebelumnya.
Standard Link Styles
Di semua web browser yang umum dipakai, jika kalian tidak menetapkan style pada tautan halaman tersebut, maka tautan pada halaman web tersebut akan menggunakan underline dan warna tautan dari default browser.
Misalnya, warna tautan default di peramban web berbasis Gecko seperti Firefox adalah – biru untuk yang belum dikunjungi, ungu untuk yang sudah dikunjungi dan merah untuk tautan aktif.
Mengatur Warna Link
Berikut ini adalah contoh yang menunjukkan cara mengatur warna tautan.
a:link { /* unvisited link */
color: #FF0000;
}
a:visited { /* visited link */
color: #00FF00;
}
a:hover { /* mouse over link */
color: #FF00FF;
}
a:active { /* active link */
color: #0000FF;
}
Menghapus Default Underline dari Link
Properti CSS text-decoration umumnya digunakan untuk menghapus underline default dari tautan. Contoh berikut menunjukkan bagaimana menghapus atau mengatur properti text-decoraton untuk berbagai kondisi hyperlink.
a:link { /* unvisited link */
color: #FF0000;
text-decoration: none;
}
a:visited { /* visited link */
color: #00FF00;
text-decoration: none;
}
a:hover { /* mouse over link */
color: #FF00FF;
text-decoration: underline;
}
a:active { /* active link */
color: #0000FF;
text-decoration: underline;
}