Belajar CSS Patrt 6 : Mengatur Hyperlink Dengan CSS

Sabtu, 26 November 2016

Belajar CSS Patrt 6 : Mengatur Hyperlink Dengan CSS

    Tidak ada komentar

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.
Untuk penggunaan atau pemanggilan hyperlink menurut statusnya dapat di tulis dengan syntax:
  • 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.
Berikut ini adalah contoh mengatur hyperlink dengan CSS

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
Itulah contoh mengatur hyperlink dengan CSS. Dapat sobat lihat sendiri dan apa perbedaan dari setiap syntax diatas. Sebagai bonus :v saya buat juga tutorial membuat button sederhana dengan CSS

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

Tidak ada komentar :

Posting Komentar

Langganan: Posting Komentar ( Atom )