Dalam tutorial kali ini kita akan membahas mengenai cara mengatur Hyperlink dengan menggunakan CSS, Hyperlink adalah link yang dapat mengalihkan halaman web ketika di klik, biasanya digunakan untuk menu navigasi, jika anda belum mengenal istilah Hyperlink bisa dipelajari terlebih dahulu di tutorial HTML mengenai Cara Membuat Link di HTML.
CSS menyediakan beberapa fitur yang dapat digunakan untuk mengatur tampilan dari hyperlink seperti warna, text decoration, serta background color, sebelum kita ke dalam contoh skrip, anda harus memahami dulu 4 status link yang dikenali oleh CSS, 4 status tersebut antara lain :
- link : merupakan kondisi default saat link ditampilkan
- hover : adalah kondisi ketika terdapat kursor mouse diatas link
- visited : adalah kondisi ketika link telah di klik
- active : adalah kondisi ketika link di klik
Karena pembuatan link menggunakan tag <a> maka untuk penggunaan selector pada link adalah :
- a:link
- a:hover
- a:visited
- a:active
Setelah anda memahami 4 status dari link, berikut ini adalah contoh penggunaan skrip CSS untuk memanipulasi dari tampilan link.
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Style Link</title>
<style type="text/css">
a:link
{
color:red;
text-decoration: none;
}
a:hover
{
color:blue;
text-decoration: underline;
background-color: yellow;
}
a:visited
{
color:green;
}
a:active
{
color:orange;
background-color:blue;
}
</style>
</head>
<body>
<a target="_blank" href="https://warungbelajar.com">Warung Belajar</a>
</body>
</html>Semisal kita simpan dengan nama style_link.html, lalu kita buka di browser maka hasilnya adalah :
Ini adalah tampilan ketika link tampil, sesuai dengan selector a:link link ditampilkan dengan warna merah, dan tanpa adanya dekorasi pada text
ini adalah tampilan ketika terdapat kursor mouse diatas link, sesuai dengan selector a:hover link ditampilkan dengan warna biru, background-color warna kuning, dan text-decoration underline (garis bawah)
ini adalah tampilan ketika link di klik, sesuai dengan selector a:active link ditampilkan dengan warna orange, background-color biru
ini adalah tampilan ketika link telah dikunjungi, sesuai dengan selector a:visited link ditampilkan dengan warna hijau.
Bagaimana teman – teman mudah bukan, itu adalah beberapa fitur yang disediakan oleh CSS yang digunakan untuk mengatur tampilan Link, untuk diskusi silahkan di kolom komentar, sampai jumpa di tutorial selanjutnya.