Lompat ke konten Lompat ke sidebar Lompat ke footer

Donasi untuk blog ini

Traktir blog ini, Klik di sini .Terima kasih.

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
properti yang umum digunakan :
  • text-decoration
  • 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>

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

Posting Komentar untuk "Belajar CSS chapter 3 (Mengubah Tampilan Link)"