Donasi untuk blog ini

Support Blog ini via donasi, 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

0 Response to "Belajar CSS chapter 3 (Mengubah Tampilan Link)"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel