Link CSS

Salah satu fungsi dari CSS yang menakjubkan dan bisa kita gunakan adalah kemampuannya untuk memodifikasi tampilan dari anchor tag atau yang lebih kita kenal dengan link.

Link states

Kalau sebuah text link kita teliti lebih lanjut maka sebuah link memiliki empat kondisi yang bisa kita modifikasi tampilannya. Empat kondisi dari link tersebut adalah:

  1. link – ini adalah tampilan link yang sama sekali belum digunakan/ di klik
  2. visited – ini adalah tampilan link yang sudah pernah digunakan/di klik
  3. hover – ini adalah tampilan link ketika mouse pointer dilayangkan diatasnya
  4. active – ini adalah tampilan link yang sedang di klik

Dengan CSS maka kamu bisa merubah tampilan dari empat kondisi link diatas.

Pseudo class

Format dari link CSS sedikit berbeda dari format code CSS yang sudah kita pelajari sejauh ini. Untuk memodifikasi tampilan dari ke empat jenis link ini maka kamu harus mengikuti format code CSS dibawah ini.

Code CSS link:

a:(STATE'S NAME) { attribute: value; }

Code CSS diatas kita beri nama pseudo class yang mendefinisikan bagaimana sebuah element HTML harus tampil. Dibawah ini adalah contoh aplikasi dari pseudo class untuk kondisi [link], [visited], dan [hover]. Yang perlu diperhatikan adalah susunan dari code dibawah untuk membuatnya berfungsi dengan benar.

Code CSS pseudo class 1:

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

Code HTML pseudo class 1:

<a href="">Link CSS ini sangat spesial!</a>

Hasil code HTML dan CSS pseudo class 1:

Link CSS ini sangat spesial!

Code CSS untuk link harus diurutkan dengan benar. Berikut ini adalah urutan yang seharusnya:

  1. link
  2. visited
  3. hover
  4. active

Menghapus garis bawah default pada link

Biasanya suatu text link secara default ditampilkan dengan underline. Nah, berikut ini adalah salah satu trick menggunakan CSS pseudo class untuk menghilangkan underline dari link.

Code CSS pseudo class 2:

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

Hasil code HTML dan CSS pseudo class 2:

Link ini hanya akan muncul garis bawahnya jika mouse kamu dilayangkan di atasnya

Yang perlu menjadi catatan adalah saat menghapus garis bawah dari sebuah link. Hal ini akan menyebabkan tampilan sebuah link menjadi sama dengan tampilan text biasa sehingga visitor tidak bisa membedakan antara link dan text biasa.

Jadi kalau kamu ingin mengedit tampilan sebuah link maka kamu harus membuatnya tampil sedikit berbeda dengan text biasa.

Beberapa contoh

Di bawah ini adalah beberapa contoh code pseudo CSS yang bisa kamu gunakan.

Code CSS pseudo class 3:

a:link {
color: white;
background-color: black;
text-decoration: none;
border: 2px solid white;
}

a:visited {
color: white;
background-color: black;
text-decoration: none;
border: 2px solid white;
}

a:hover {
color: black;
background-color: white;
text-decoration: none;
border: 2px solid black;
}

Hasil code HTML dan CSS pseudo class 3:

link aneh 3

Code CSS pseudo class 4:

a:link {
color: blue;
background-color: red;
font-size: 26px;
border: 10px outset blue;
font-family: sans-serif;
text-transform: lowercase;
text-decoration: none;
}

a:visited {
color: blue;
background-color: red;
font-size: 26px;
border: 10px outset blue;
font-family: sans-serif;
text-transform: lowercase;
text-decoration: none;
}

a:hover {
color: blue;
background-color: red;
font-size: 27px;
border: 10px inset blue;
font-family: serif;
text-transform: uppercase;
text-decoration: line-through;
letter-spacing: 3px;
word-spacing: 6px;
font-weight: normal;
}

Hasil code HTML dan CSS pseudo class 4:

Link CSS ini sangat aneh sekali..

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>