CSS (Cascading Style Sheet)

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>

About riahantoro
rhantoro.net

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: