CSS - Styling Links

Pada kesempatan kali kini kita akan membahas materi tentang, styling link dan styling list pada CSS. Ketika anda ingin memberikan style pada link di laman web, sangat penting untuk Anda ingat bahwa link termasuk fitur yang membentuk struktur web anda. Link terkoneksi dengan link lain pada web sebagai alat untuk membantu orang mendapatkan pengetahuan baru atau lainnya. Itu juga akan membantu search engine seperti google, bing, menautkan content dan text anda pada pada konten atau text orang lain. Jadi, hari ini kita akan bicara khusus tentang link karena saya ingin Anda memikirkannya bagaimana style Anda nanti. Links dapat diberi style dengan property CSS seperti color, font-family, background, dll. Link ditandai dengan selector

Secara umum, ketika Anda membuat style pada link, Anda dapat menggunakan semua atribut yang berbeda, yang sama Anda telah gunakan untuk yang lainnya. Apakah itu header Anda, paragraf Anda, atau hal-hal seperti itu. Namun, tautan memang memiliki properti tambahan khusus yang disebut text-decoration. text-decoration berguna dalam mempercantik text halaman HMTL kita. Value dari property ini: text-decoration: overline, untuk membuat tulisan dengan dekorasi garis diatasnya text-decoration: line-through, untuk membuat tulisan dengan dekorasi garis ditengahnya text-decoration: underline, untuk membuat tulisan dengan dekorasi garis bawah text-decoration: blink, untuk membuat tulisan berkedip text-decoration: none, untuk membuat tulisan tanpa dekorasi

Contoh:

<html>
<head>
<style type="text/css">
h1 {text-decoration: overline}
h2 {text-decoration: line-through}
h3 {text-decoration: underline}
h4 {text-decoration: blink}
a {text-decoration: none}
</style>
</head>

<body>
<h1>overline link</h1>
<h2>line through link</h2>
<h3>underline link</h3>
<h4>blink link</h4>
<p><a href="http://sixv.com/">Link ke sixv.com</a></p>
</body>

</html>

Hasilnya:

stylelink1

Baiklah kita lanjutkan, ketika saya telah menetapkan warna baru dan warna latar belakang baru. Sekarang saya juga menetapkan lebar, dan, jika Anda mencoba mengatur lebar dari suatu link dan tidak berhasil, ingatlah, link secara default adalah inline dan mereka tidak memiliki lebar kecuali Anda mengubahnya menjadi block atau block-inline. Saya juga akan menyelaraskan teks, menambahkan beberapa padding, dan text decoration: none. Link juga diberi style berbeda tergantung pada keadaan di mana mereka berada. Maksudnya ketika anda sudah meng-click link, apa tanda dari link tersebut?

Pernahkah Anda memperhatikan hal itu, ketika Anda membuka halaman web, terkadang beberapa tautan berwarna biru, dan beberapa dari mereka berwarna ungu? Dan, Anda menyadari, ketika link terklik, warna berubah, ya mereka ada di sana karena Anda telah mengunjungi mereka sebelumnya. Dan saya akan membahasnya sangat cepat dan lambat, ketika kita berbicara tentang apa yang pseudo-class, kita akan berbicara tentang mereka bahkan lebih.

CSS pseudo-class digunakan untuk menambahkan efek khusus ke beberapa penyeleksi. Anda tidak perlu menggunakan JavaScript atau skrip lain untuk menggunakan efek tersebut. Oke, coba perhatikan dibawah ini:

  • a:link, tautan normal, belum pernah dikunjungi
  • a:visited, tautan yang sudah dikunjungi pengguna
  • a:hover, tautan saat mouse berada diatasnya
  • a:active, tautan saat diklik

Contoh:

<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
    color: red;
}

/* visited link */
a:visited {
    color: green;
}

/* mouse over link */
a:hover {
    color: black;
}

/* selected link */
a:active {
    color: blue;
}
</style>
</head>
<body>

<p><b><a href="default.asp" target="_blank">sixv.com</a></b></p>
<p>Link akan berwarna merah dalam keadaan normal belum dikunjungi</p>
<p>Saat dikunjungi, link berwarna hijau</p>
<p>Link akan berwarna hitam saat mouse berada diatasnya</p>
<p>Link berwarna biru saat diklik</p>

</body>
</html>

Anda bisa mencoba kode diatas, pada HTML Viewer online seperti https://codebeautify.org/htmlviewer/, Result link saat sudah dikunjungi, berwarna hijau:

stylelink2

Oke lanjut, terkadang ketika memasang tautannya, orang benar-benar mencoba membuatnya terlihat seperti tombol. Dan kami ingin menghindarinya karena kami ingin menjadi semantik. Jika Anda menginginkan sebuah tombol, sebaiknya gunakan elemen tombol sebagai gantinya. Dan Anda bisa melakukannya dengan sangat sederhana memasukkan tag tombol sebagai ganti tag anchor. Dan lagi, dengan cara yang sama Anda bisa gaya itu dalam berbagai cara.

Anda juga bisa menambah Properti background-color sebagai warna latar belakang untuk link;

  • a: link {background-color: yellow;}
  • a: visited {background-color: # FFFF85;}
  • a: hover {background-color: purple;}
  • a: active {background-color: # FF704D;}