CSS (Cascading Style Sheet)
December 29, 2009 Leave a comment
CSS berguna untuk mensupport tampilan HTML Element
Manfaat CSS :
– Mempercepat development web
– Mempermudah pemeliharaan dokumen web
– Mempercepat proses rendering / pembacaan HTML
CSS Syntax :
– Selector adalah HTML Element
– Masing-masing punya pasangan property dan value
– Property adalah style attribute yg akan diubah. Setiap Property punya value
– Nama Property dan Value bersifat case sensitive
– Semua Property berada dalam bracket { … }
– Setiap akhir value ditutup dengan semicolon ;
– Group property : (tanda koma serta &)
H1, H2 & H5 { color:red; }
CSS Comment :
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial
}
{
text-align:center;
<!– ini juga comment –>
color:black;
font-family:arial
}
Insert CSS
1. External Style Sheet
Kita mempunyai satu file tersendiri yang bernama namafile.css yang berisi code css, kemudian kita panggil didalam code html kita didalam tag Head.
Contoh :
<head>
<link rel=”stylesheet” type=”text/css” href=”namafile.css” />
</head>
2. Internal Style Sheet
Maksudnya ialah kita menempatkan code css didalam file html yang kita inginkan, dan pemanggilannya tidak perlu merefer seperti pada External. Untuk menempatkan code css kita harus mengawali dengan tag
<style type=”text/css”>
…
</style>
Contoh didalam Tag Head
<style type=”text/css”>
body {
color: green;
background: white;
font-family :arial;
}
</head>
Maksudnya ialah style ditempatkan didalam HTML Element
contoh :
Berfungsi sebagai pengontrol design
Tipe Selector
1. Selector HTML Element
contoh :
2. User Defined Selector / Selector Bebas
contoh :
{
3. Selector dengan Class
Penamaan diawali dengan tanda . (dot)
contoh :
4. Selector dengan ID
Penamaan diawali dengan tanda #
contoh :
Recent Comments