MENGATUR HYPERLINK DENGAN CSS
Hyperlink merupakan link yang berguna untuk mengaralihkan halaman ketika link diklik. Hyperlink ini dibuat menggunakan tag <a> dan diakhiri dengan </a> . Untuk mengatur hyperlink dengan CSS bisa saya katakan cukup mudah. Pada tutor kali ini akan dijelaskan tentang cara mengatur hyperlink dengan CSS, mulai dari merubah warnanya ketika link diklik dan sebagainya.
Ada empat status yang di miliki oleh hyperlink html dan bisa di manipulasi dengan menggunakan css. yaitu :
- link : Merupakan link aktif biasa.
- visited : Merupakan status sebuah link yang telah di kunjungi.
- hover : Merupakan status sebuah link ketika kursor diarahkan pada link maka gayanya akan berubah
- active : Merupakan status sebuah link atau hyperlink pada saat sudah di klik.
- a:link = Merupakan status sebuah link biasa
- a:visited = Merupakan status sebuah link yang telah di kunjungi.
- a:hover = Merupakan status sebuah link ketika kursor diarahkan pada link maka gayanya akan berubah
- a:active = Merupakan status sebuah link atau hyperlink pada saat sudah di klik.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<a class="link" href="http://www.script-kiddies22.blogspot.co.id">Klik Disini</a>
</body>
</html>
style.css
.link{
font-size: 20pt;
}
.link:hover{
color: red;
}
.link:link{
color: blue;
}
.link:active{
color: green;
}
.link:visited{
background: yellow;
}
 |
| Tampilan Awal |
 |
| Ketika Cursor Diarahkan Pada Link |
index.html
<!DOCTYPE html>
<html>
<head>
<title>Button CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<a class="contoh-link" target="_blank" href="http://www.script-kiddies22.blogspot.com">Button</a>
</body>
</html>
style.css
.contoh-link,
.contoh-link:link,
.contoh-link:active,
.contoh-link:visited{
font-size: 20pt;
background: #FF0000;
color: #fff;
text-decoration: none;
padding: 10px;
font-family: sans-serif;
}
.contoh-link:hover{
background: #F2000D;
}  |
| Hasilnya Seperti ini |
KESIMPULAN
Perlu diperhatikan Saat penulisan CSS untuk beberapa kondisi link harus memperhatikan urutan. Yaitu hover harus ditulis setelah link dan visited, kemudian active harus ditulis setelah hover.
Jika ada pertanyaan silahkan berikan komentar dan nantikan tutorial Belajar CSS berikutnya hanya di Script_Kiddies . Sekian Terima Kasih
Referensi : Malas Ngoding
TUTORIAL CSS LAINYA
- Belajar CSS Part 1 : Pengertian dan Mengenal CSS
- Belajar CSS Part 2 : Cara Penulisan CSS
- Belajar CSS Part 3 : Mengubah Background Dengan CSS
- Belajar CSS Part 4 : Margin dan Padding CSS
- Belajar CSS Part 5 : Mengatur Font Dengan CSS
- Belajar CSS Part 6 : Mengatur Hyperlink Dengan CSS
- Belajar CSS Part 7 : Mengatur Format Text Dengan CSS
- Belajar CSS Part 8 : Mengenal Position CSS
- Belajar CSS Part 9 : Mengatur Border Dengan CSS
- Belajar CSS Part 10 : Mengatur List Dengan CSS
- Belajar CSS Part 11 : Mengatur Float Dengan CSS
EmoticonEmoticon