Apa itu CSS ?
- SCC merupakan singkatan dari Cascading Style Sheet
- Style mendifinisikan bagaimana menampilkan di dalam Style Sheet
- Style biasanya disimpan dalam Style Sheet
- Penggunaan Style Sheet dapat menghemat waktu disain, karena dapat diaksesoleh sejumlah dokumen html
- External Style Sheet disimpan dalam file berekstensi ".css"
External Style Sheet
External Style Sheet cocok diimplementasikan dengan sejumlah dokumen. Setiap dokumen html harus memiliki link dengan style sheet dengan menggunakan tag <link>. tag tersebut berada dalam tag <head>. Ini contoh dari external style sheet:
<head>
<link rel="stylesheet" type="text/css" herf="mystyle.css">
<head>
Maka browser akan membaca definisi dari file mystyle.css yang berisi:
hr {color:siena}
p {margin-left:20px}
body{background-image:url("image/back40.gif)}
Internal Style Sheet
Internal Style Sheet digunakan pada sebuah dokumen html. Style digunakan dalam tag head dengan menggunakan tag <style>
<head>
<style type="text/css">
hr {color:siena}
p {margin-left:20px}
body{background-image:url("image/back40.gif)}
</style>
<head>
Inline Styles
Inline style mendifinisikan style hanya untuk elemen html saja, contohnya:
<p style="color:sienna; margin-left:20px">
Ini adalah paragraf
</p">
Nah... supaya nggak bingung disini saya tambahin tag html + css> Jadi teman-teman tinggal copas....
Tag HTML
<html>
<head>
<title>Penggunaan Style Sheet</title>
<style type="text/css">
h4.as_internal{
color:#00FF00;
font-family:tahoma, verdana, geneva, lucida, "lucida grande", arial, helvetica, sans-serif;
font-size:14px;
font-width:bold;
}
td.as_internal{
background-color:#ffffff;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<table width=780 border=1 align=center>
<tr>
<td class="as_external" colspan=3><h4 class="as_external">Penggunaan Style Sheet External</h4></td>
</tr>
<tr>
<td class="as_internal" colspan=3><h4 class="as_internal">Penggunaan Style Sheet Internal</h>></td>
</tr>
<tr>
<td style="background-color:lightskyblue;" colspan=3><h4 style="color:#0000ff";
font-family:tahoma, verdana, geneva, lucida, "lucida grande", arial, helvetica, sans-serif; font-size:14px;
font-width:bold;>Penggunaan Style Sheet Inline</h4></td>
</tr>
<tr>
<td colspan=3><h4>Tanpa Penggunaan Style Sheet</h4></td>
</tr>
<tr>
<td class="as_internal"><a href="index.html">Index.html</a></td>
<td class="as_internal"><a href="aboutme.html">aboutme.html</a></td>
<td class="as_internal"><a href="guestbook.html">guestbook.html</a></td>
</tr>
<tr>
<td colspan=3><hr></td>
</tr>
<tr>
<td>Nama</td>
<td colspan=2><input type="text" name="text1" class="inputbox" value=""></td>
</tr>
<tr>
<td>Alamat</td>
<td colspan=2><input type="text" name="text2" class="inputbox" value="" size="100"></td>
</tr>
<tr>
<td colspan=3><hr></td>
</tr>
<tr>
<td colspan=3>
<input type="submit" calss="button" value="Submit">
<input type="reset" calss="reset" value=Reset>
</td>
</tr>
</table>
</body>
</html>
File CSS
/* body */
body{
bacground: #D4D0C8;
margin:0px;
}
/* headling */
h4.as_external{
color:#FF0000;
font-family:tahoma, verdana, geneva, lucida, "lucida grande", arial, helvetica, sans-serif;
font-size:14px;
font-width:bold;
}
/* link */
a:link,
a:visited{
font-size:11px;
color:#333333;
text-decoration:none;
font-family:tahoma, verdana, geneva, lucida, "lucida grande", arial, helvetica, sans-serif;
}
a:hover:{
color:#ff0000;
text-decoration:underline;
}
/* horizontal line*/
hr{
background:#0000ff;
height:13px;
border:1px solid #000000;
}
/* button */
.button{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-style:normal;
font-size:10px;
border-style:solid;
padding:0;
height:16px;
color:#30348D;
crusor:hand;
}
/* text */
.inputbox{
font-family:tahoma, verdana, geneva, lucida, "lucida grande", arial, helvetica, sans-serif;
font-size:x-small;
color:#333333;
backgroud:#ffffff;
border:1px solid;
height:18px;
line-height:13px;
}
td.as_external{
background-color:#EDF5FE;
}
