Tag link dalam html adalah “a” yang memiliki kepanjangan anchor, secara bawaan sendiri html telah membuat link agar menarik, namun kita dalam melakukan perubahan untuk mengatur link dengan css.
Bagaimana agar link dapat menarik dan dapat sesuai dengan desain yang kita inginkan, mulai dari ketika mouse melewati link tersebut hingga setelah dikunjungi, kita dapat mengatur link dengan css tersebut agar link tersebut memiliki warna yang berbeda-beda.
Mengatur Link Dengan CSS
Untuk dapat mengatur link dengan css yaitu dengan menggunakan beberapa pseudo-class, pseudo-class ini akan dibahas pada tutorial berikutnya. Berikut ini tabel pseudo-class yang bisa digunakan untuk mengatur link dengan css.
| Properti | Keterangan |
|---|---|
| :link | Link normal, pada saat menggunakan belum mengarahkan cursor atau belum klik link tersebut |
| :visited | Pseudo-class :visited akan berfungsi apabila link tersebut telah terjadi klik atau telah dikunjungi |
| :hover | Fungsi :hover akan aktif apabila mouse mengarahkan atau melewati link tersebut |
| :active | Pseudo-class :active akan berfungsi apabila link pada saat bersamaan di klik oleh cursor |
Dari tabel pseudo-class diatas akan kita bahas satu persatu dengan detail untuk mempermudah proses pembelajaran css tentang mengatur link dengan css ini.
Dibawah ini adalah source code html untuk mengatur link dengan css, silahkan dipraktekan pada komputer anda, lalu perhatikan penjelasan lebih.
<!DOCTYPE html>
<html>
  <head>
    <title>Link</title>
    <style type="text/css">
      a:link {
        color: red;
      }
      a:visited {
        color: yellow;
      }
      a:hover {
        color: blue;
      }
      a:active {
        color: black;
      }
    </style>
  </head>
<body>
  <a href="#">Ini adalah contoh link</a>
</body>
</html>Code language: HTML, XML (xml)Jika anda sudah menulis kode diatas pada komputer anda silahkan perhatikan penjelasan detail dibawah ini.
Pseudo-class :link
Pseudo-class link berguna apabila link tersebut dalam keadaan diam, atau cursor mouse tidak mengarah kearah link tersebut, pada source code diatas link yang diam tersebut telah diberi warna merah.
Pseudo-class :visited
Pseudo-class visited akan aktif apabila link telah dikunjungi, ketika link telah dikunjungi maka akan berubah sesuai dengan tampilan yang telah didefinisikan.
Pseudo-class :hover
Pada pseudo-class hover ini akana berfungsi apabila cursor mouse di arahkan tanpa di klik pada link tersebut, maka warnya akan berubah sesuai yang telah ditentukan.
Pseudo-class :active
Pseudo-class active ini akan berfungsi apabila link di klik, untuk membuktikannya silahkan diklik dan tahan, maka secara bersamaan warna link tersebut akan berubah.
Demikianlah tutorial bagaimana cara mengatur link dengan css ini, semoga dapat berguna dan dipraktekan dengan baik.
