Belajar CSS chapter 3 (Mengubah Tampilan Link)


Assalamualaikum, sob. Untuk tutorial kali ini saya akan menjelaskan sedikit tentang mengubah tampilan link dengan css. link dapat ditata dengan berbeda tergantung pada keadaan. MIsal saat cursor diatasnya, dikunjungi, dan lain-lain. Mari langsung kita simak tutorialnya. Check this out...

CSS link

4 keadaan berbeda pada link :
  • a:link – normal, pada saat link belum dikunjungi
  • a:visited – ketika link sudah dikunjungi
  • a:hover – ketika mouse diatasnya
  • a:active – ketika diklik
Catatan :
  • a:hover harus setelah a:link dan a:visited
  • a:active harus setelah a:hover
Contoh :
hasilnya :
properti yang umum digunakan :
  • text-decoration
  • background-color
Contoh text-decoration :
Contoh background-color :
Contoh membuat link dalam box :
<!DOCTYPE html>
<html>
<head>
<style>
a:link,a:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
}
a:hover,a:active
{
background-color:#7A991A;
}
</style>
</head>
<body>
<a href=”default.asp” target=”_blank”>This is a link</a>
</body>
</html>
 Hasilnya adalah: 
sekian untuk postingan kali ini. Jangan lupa komentarnya ya, karena satu komen dari kalian berarti untuk perbaikan postingan-postingan selanjutnya.
Wassalamualaikum wr wb
Sumber : w3schools.com

Komentar

Postingan populer dari blog ini

Penilaian (Definisi, Prinsip dan Tujuan)

Penilaian Portofolio (Definisi, Karakteristik, Kelebihan dan Kekurangan)