Tips Penataan Link/Styling LinksClick here to get more tutorials!

Link berfungsi untuk menghubungkan sebuah bagian blog/web dengan bagian yang lain dari blog atau dengan bagian blog/web yang lain. Link bisa berbentuk teks (teks link) atau link image/gambar (image link). Jika dalam bentuk teks, biasanya link dibuat dalam rupa berbeda dengan teks yang laian. Bisa dengan menggunakan warna berbeda, ditambahkan sebuah background, garis bawah (text-decoration:underline), bentuk huruf atau yang lebih tebal. Ciri utama sebuah link adalah berubahnya bentuk cursor ketika diarahkan tepat di atasnya. Link dibentuk menggunakan kode css link property untuk menndukung kode html tag "a" agar mampu memberikan sebuah "tanda link" secara maksimal. Agar penanda ini bekerja secara optimal, aturan baku harus diterapkan pada setiap bagian (elemen) css link property. 4 bagian property link yang harus ditata secara berurutan adalah sebagai berikut:

1. a:link » Menyatakan sebuah link dan link tersebut belum dikunjungi (belum di-klik).
2. a:visited » Link yang telah dikunjungi (pernah di-klik). Link yang telah dikunjungi biasanya dibuat dalam warna tertentu yang yang lebih tua atau lebih muda dari background halaman sehingga warna tak terlihat menonjol.
3. a:hover » Warna link akan berubah ketika cursor diarahkan di atasnya. Selain perubahan warna, anda bisa menambahkan background atau garis di bawah/atas teks link (text-decoration).
4. a:active » Perubahan terjadi tepat saat sebuah link di-klik (perubahan bisa berupa warna, background atau paduan warna dan background.

D E M O

This is a link

This is a link

This is a link

This is a link

Contoh tata urutan penulisan kode css link

a:link{ /* a:link di urutan teratas - no.1 */
    color:#000;
    font:100% Arial;
    font-weight:bold;
    text-decoration:underline;
}
a:visited{ /* a:visited - no.2 */
    color:#777;
}
a:hover{ /* a:hover - no.3 */
    color:#f00;
    text-decoration:none;
}
a:active{ /* a:active - no.4 */
    color:blue;
}

Jika anda ingin menambahkan sebuah css focus selector, buat kodenya dalam bentuk seperti berikut:

a:link{ /* a:link di urutan teratas - no.1 */
    color:#000;
    font:100% Arial;
    font-weight:bold;
    text-decoration:underline;
}
a:visited{ /* a:visited - no.2 */
    color:#777;
}
a:hover{ /* a:hover - no.3 */
    color:#f00;
    text-decoration:none;
}
a:focus{ /* a:focus - no.4 */
    color:green;
    text-decoration:blink;
}
a:active{ /* a:active - no.5 */
    color:blue;
}