Mengenal Styling Links

css

Link atau hyperlink merupakan suatu kata, kumpulan kata, atau gambar yang dapat diklik untuk pindah ke halaman lain. Seperti sebuah jembatan penghubung yang orang lalui untuk melewati jalan raya atau pun sebuah sungai.

Seorang yang berkecimpung di dunia web pasti sangat akrab dengan yang namanya link. Link bisa diberikan sebuah gaya (style) dengan css ( seperti : color, font-family, background ) inilah yang disebut dengan Styling Links.

Gaya Pada Link

Pada dasarnya link mempunyai 4 keadaan awal :

a:link - Saat normal, Belum dikunjungi
a:visited - Link yang sudah dikunjungi
a:hover - Link ketika mouse berada diatasnya
a:active - Link ketika diklik

Contoh :

a:link {color:#FF0000;}
a:visited {color:#00FF00;}
a:hover {color:#FF00FF;}
a:active {color:#0000FF;}

Hasilnya : Dibalik Waktu

Ketika mengatur keadaan semua link, ada beberapa aturan :

a:hover harus setelah a:link dan a:visited
a:active harus setelah a:hover

Gaya Link Pada Umumnya

Gaya link pada umumnya merupakan gaya link yang biasa digunakan atau paling sering dipaki di berbagai web maupun blog. Contoh diatas merupakan gaya menggunakan properti color, berikut ini akan menggunakan properti text-decoration. Contoh :

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

Hasilnya : Dibalik Waktu

Kalau ini menggunakan property background-color. Contoh :

a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

Hasilnya : Dibalik Waktu

Penggunaan kode css pada contoh diatas ditaruh pada bagian templates blog sebelum kode

</head>

Oke untuk pengenalan Styling Links mungkin sampai disini dulu, semoga dapat memberi inspirasi dan juga berguna bagi pembaca.

Dibalik Waktu