Tutorial CSS : Mengatur tampilan Link dan Kondisinya

Link adalah sebuah tautan yang bisa menghubungkan kita ke halaman lain. Secara default biasanya tampilan link dibuat bergaris bawah (underline). Namun dengan CSS kita bisa mengatur tampilan link dengan beberapa properti pada text seperti color, font-family, font-size dan lain-lain. Selain itu kita juga biasa mengatur background dengan CSS untuk mengatur background seperti background-color.

Contoh penggunaan CSS untuk link :

a {
    color: blue;
}

Selain mengatur tampilan link, kita juga bisa membuat tampilan berbeda-beda untuk tiap kondisi link. Untuk menyatakan kondisi sebuah link kita menggunakan tanda titikdua (:) setelah tag link a. Dan deklarasi CSS ditulis setelah kondisi dengan cara seperti penulisan deklarasi CSS pada umumnya.

Ada empat kondisi link yang bisa dibuat CSS-nya, yaitu :

• a:link, yaitu link dalam kondisi normal, belum dikunjungi
• a:visited, yaitu link yang sudah dikunjungi
• a:hover, yaitu kondisi link saat mouse mengenai link/mouse berada diatas link tapi belum diklik.
• a:active, yaitu kondisi link pada saat diklik.

Contoh penggunaan CSS untuk beberapa kondisi link :

1. Link dalam kondisi normal

a {
    color: blue;
}

2. Link telah dikunjungi (Visited)

a:visited {
    color: green;
}

3. Link saat ada mouse diatasnya (Hover)

a:hover {
    color: red;
}

4. Link saat diklik

a:active {
    color: yellow;
}

Kita bisa berlatih CSS link disini >>

Penting dalam menulis CSS untuk beberapa kondisi Link

Saat penulisan CSS untuk beberapa kondis link harus memperhatikan urutan. Yaitu hover harus ditulis setelah link dan visited, kemudian active harus ditulis setelah hover.