Page 31 - WP YAMIN - MTI CANDUANG
P. 31
Bengkel Internet PENS-ITS : Cascading Style Sheets
IX.PENGATURAN HYPERLINK &
TOMBOL YANG MENARIK </STYLE>
Syntax penulisan pada CSS : </HEAD>
a:link {property : value} <BODY>
<TABLE border="1">
Selector Keterangan <TR>
a:link Keadaan awal pemicu link aktif <TD width="144">
a:visited Keadaan pemicu link setelah
dikunjungi <a href="#">Arahkan Mouse ke
a:active Keadaan pemicu yang sedang aktif sini</a>
a:hover Kejadian pada pemicu link saat mouse </TD>
digerakkan diatasnya
</TR>
1. Penggunaan property selector <TR>
<HTML> <TD width="144">
<HEAD>
<TITLE>Pengaturan pada link</TITLE> <a href="#">Arahkan Mouse ke
sini</a>
</TD>
<STYLE type="text/css">
</TR>
/*Konversi pengaturan Link pada contoh </TABLE>
sebelumya menggunakan css */ </BODY>
A:link {color : green;}
A:hover { color : pink;} </HTML>
</STYLE>
</HEAD>
<BODY>
<a href="http://lecturer.eepis-its.edu/~zenhadi" 3. Membuat tombol visual 3D
target="_self">Contoh Hyperlink menggunakan a. Pembuatan file css
CSS</a> /* CSS Document */
.leftlinks {
</BODY> border:1px solid #22476C;
</HTML>
padding:5px;
2. Pembuatan tombol dengan tabel margin:5px;
text-align:middle;
background-color:#336699;
<HTML> width:150px;
<HEAD>
<TITLE>Pengaturan Pada Link }
background</TITLE> .leftlinks a {
display:block;
margin:3px 0px;
<STYLE ="text/css"> border-top:1px solid #4C86C0;
A:link {text-decoration: none} border-left:1px solid #4C86C0;
A:visited {text-decoration: none}
A:active {text-decoration: none} border-right:1px solid #22476C;
A:hover { border-bottom:1px solid #22476C;
padding: 4px 10px;
font-weight:none; text-align:center;
color: red; background-color:#336699;
background-color:blue;}
9
