Mengatur Style Link dengan CSS - Melanjutkan kembali tentang belajar CSS. Kali ini tentang CSS link. Link dapat kita atur atau kita modifikasi dengan berbagai style CSS. Seperti dengan properti color, text-decoration, font-family, backgroud-color, dan sebagainya.
Selain itu, link juga dapat ditata berbeda tergantung pada keadaan link tersebut. Ada empat jenis keadaan link :
a:link - keadaan link normal. link yang belum dikunjungi/diklik user
a:visited - keadaan link yang sudah pernah dikunjungi oleh user
a:hover - keadaan link ketika kursor melintas
a:active - keadaan link yang baru saja sudah diklik
Untuk lebih memahami seperti apa penerapannya, berikut contoh penulisan coding mengatur style link dengan CSS :
Kode tersebut berarti bahwa warna link akan tampil berbeda-beda sesuai jenis keadaan link nya. Apakah link tersebut adalah link normal yang belum dikunjungi user ataukah link visited, hover, active.
Itu hanya contoh mengatur style link dengan property CSS color, yaitu menentukan warna link sesuai jenis keadaan link nya. Selain color, kamu juga bisa mengatur style jenis tulisan, warna background link, dan text-decoration nya.
Yang perlu diperhatikan di sini adalah urutan penulisannya. a:hover harus dituliskan setelah a:link dan a:visited. Sedangkan a:active dituliskan urutannya setelah a:hover. Seperti terlihat pada contoh penulisan coding modifikasi link di atas.
Selain itu, link juga dapat ditata berbeda tergantung pada keadaan link tersebut. Ada empat jenis keadaan link :
a:link - keadaan link normal. link yang belum dikunjungi/diklik user
a:visited - keadaan link yang sudah pernah dikunjungi oleh user
a:hover - keadaan link ketika kursor melintas
a:active - keadaan link yang baru saja sudah diklik
Untuk lebih memahami seperti apa penerapannya, berikut contoh penulisan coding mengatur style link dengan CSS :
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
color: #FF0000;
}
a:visited {
color: #00FF00;
}
a:hover {
color: #FF00FF;
}
a:active {
color: #0000FF;
}
</style>
</head>
<body>
<p><b><a href="http://sinahu-coding.blogspot.com" target="_blank">Ini contoh link</a></b></p>
</body>
</html>
Kode tersebut berarti bahwa warna link akan tampil berbeda-beda sesuai jenis keadaan link nya. Apakah link tersebut adalah link normal yang belum dikunjungi user ataukah link visited, hover, active.
Itu hanya contoh mengatur style link dengan property CSS color, yaitu menentukan warna link sesuai jenis keadaan link nya. Selain color, kamu juga bisa mengatur style jenis tulisan, warna background link, dan text-decoration nya.
Yang perlu diperhatikan di sini adalah urutan penulisannya. a:hover harus dituliskan setelah a:link dan a:visited. Sedangkan a:active dituliskan urutannya setelah a:hover. Seperti terlihat pada contoh penulisan coding modifikasi link di atas.
Itulah sedikit pembahasan tentang CSS Links dan cara mengatur style link menggunakan CSS. Semoga bermanfaat.
0 Komentar untuk "Mengatur Style Link dengan CSS"