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 :

/* ini adalah comment */
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial
}
<!– Ini juga comment –>
p
{
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>

Penempatan code css bisa didalam tag <head> bisa juga didalam <body>
Contoh didalam Tag Head
<head>
<style type=”text/css”>
body {
color: green;
background: white;
font-family :arial;
}
</style>
</head>
3. Inline Style Sheet
Maksudnya ialah style ditempatkan didalam HTML Element
contoh :

<BODY style=”color: white;background:green;font-family: arial;” >
SELECTOR

Berfungsi sebagai pengontrol design
Tipe Selector
1. Selector HTML Element
contoh :

body
{
font-family: Geneva, Arial;
font-size: 20px;
color: red;
background-color: green;
}

2. User Defined Selector / Selector Bebas
contoh :

<style type=”text/css”>
gbawah
{
text-decoration:underline, line-through;
}
</style>
——————————————————–
<html>
<body>
<gbawah>Tulisan</gbawah>
</body>
</html>

3. Selector dengan Class
Penamaan diawali dengan tanda . (dot)
contoh :

<style type=”text/css”>
.right
{
text-align : right
}
</style>
————————————————————-
<html>
<body>
<h2 class=”right”>Class Heading 2 </h2>
</body>
</html>

4. Selector dengan ID
Penamaan diawali dengan tanda #
contoh :

<style type=”text/css”>
#kanan
{
font-size: 20px;
}
</style>
————————————————————-
<html>
<body>
<span id=“kanan”>Selector ID </span>
</body>
</html>

Filed under Information Technology Tagged with , ,