Tips cara menggunakan Pseudo CSS untuk HTML Tag. Contoh penggunaan Pseudo-Class untuk memberi gaya pada link baik saat biasa, hover ataupun link aktif.

Sebuah Pseudo Class memungkinkan kita memperhitungkan kondisi dan event berbeda saat mendefinisikan sebuah Tag HTML.

Kita akan melihat contoh berikut. Link biasanya di HTML dituliskan dengan Tag <a>. Tag ini kemudian bisa kita gunakan sebagai selector di CSS.

Cara penulisannya:

a {
color: blue;
}

Untuk link sendiri, ada beberapa keadaan. Misal link yang belum dikunjungi dan setelah dikunjungi. Pseudo Class memungkinkan kita membuat beberapa gaya untuk lnk yang belum dan sudah dikunjungi.

Contoh penulisannya:

a:link {
color: blue;
}
a:visited {
color: red;
}

Kita menggunakan penulisan yang standar;

a:link untuk link yang belum dikunjungi.
a:visited untuk memberi warna link yang sudah dikunjungi. Dalam contoh diatas, menjadi warna merah ( red ).

Untuk link yang aktif cara menuliskannya a:active.

Link aktif adalah link yang kita sekarang ada di dalam halamannya.

Untuk link hover, bisa kita tuliskan menjadi: a:hover dan bisa kita berikan style atau warna sesuai keinginan.

Pada contoh berikut kita menggunakan Pseudo-Class untuk link yang belum dikunjungi. Kita akan memberikan styling pada link bersangkutan setelah dikunjungi.

Link belum dikunjungi

Pada contoh dibawah ini, link yang belum dikunjungi akan menjadi biru muda atau code warnanya ( #6699CC ).

a:link {
color: #6699CC;
}

Kemudian, kita menggunakan Pseudo Class untuk link yang sudah dikunjungi. Maka kita ganti kata link menjadi visited. Seperti berikut:

a:visited {
color: #660099;
}

Pseudo Class Active

Penulisan ini digunakan untuk link aktif. Misalnya kita neri link aktif warna background kuning.

a:active {
background-color: #FFFF00;
}

Pseudo-Class hover

Kita gunakan saat mouse hover diatas link kita.

Misal, kita memberikan warna berbeda dan font berbeda saat hover. Misal, font menjadi Italic saat hover.

a:hover {
color: purple;
font-style: italic;
}

Selain itu, bisa juga memberikan efek jarak huruf yang berbeda pada saat link kena hover mouse.

Cara penulisan:

a:hover {
                 letter-spacing: 10px;
                font-weight:bold;
                color:orange;
}

Kita juga bisa memberikan gaya berbeda untuk font, misal Uppercase.

a:hover {
                 text-transform: uppercase;
                font-weight:bold;
                color:blue;
                background-color:yellow;
}

Salah satu yang diinginkan oleh pembaca adalah: bagaimana cara menghilangkan garis bawah link atau

Menghilangkan underline link

Meskipun bisa kita lakukan, tetapi, hati – hati. Karena, secara standar link diberikan garis bawah untuk membedakannya dengan text lainnya.

Cara menuliskannya:

a {
        text-decoration:none;
}

Cara yang lainnya, kita bisa menggabungkan text-decoration dengan properti lainnya untuk memberi efek link:

Misalnya:

a:link {
color: green;
text-decoration:mone;
}

a:visited {
color: blue;
text-decoration:none;
}

a:active {
background color:purple;
text-decoration:none;
}

a:hover {
color: red;
text-decoration:none;
}

Itulah contoh – contoh cara penggunaan Pseudo Class untuk CSS. Semoga bermanfaat dan salam sukses luar biasa.