Keuntungan menggunakan CSS
CSS digunakan untuk mempersingkat penulisan tag HTML seperti font, color, text, dan table menjadi lebih ringkas sehingga tidak terjadi perulangan tulisan.
Keuntungan :
- Memisahkan presentation sebuah dokumen dari content dokumen itu sendiri
- Mempermudah dan mempersingkat pembuatan dan pemeliharaan dokumen web
- Mempercepat proses rendering/pembacaan HTML
Penempatan CSS
# Inline Style Sheet
Pada posisi ini, CSS di tuliskan di dalam elemen HTML, dan mempunyai ciri-ciri:
- - Merupakan style yang terlemah karena editing harus dilakukan dimana inline berada
- - Mirip dengan atribut biasa
- - Bagian dari <BODY>
Format statemen : selector {property:value}
Nama selector bisa merujuk ke tag HTML yang akan di edit, sebagai contoh apabila tag paragraf di ubah dengan CSS maka dapat ditulis sebagai berikut :
P {property:value}
Contoh penggunaan inline style sheet:
<html>
<head>
<title>Contoh</title>
<head>
<body>
<p style="font-style:italic">tulisan ini tercetak miring</p>
</body>
</html>
Jika source di atasa di jalankan di web browser, maka akan di dapatkan tulisan miring “tulisan ini tercetak mirirng”.
# Embedded Style Sheet
Penulisan CSS di dalam dokumen HTML dan menggunakan tag <style>....</style> yang di tempatkan pada bagian page header atau diantara tag <head>....</head>. Penggunaan embedded style sheet akan memberikan efek terhadap satu halaman saja.
Format statemen:
"HTML tag" {"CSS property":" value"}
"HTML tag" {"CSS propertyI" : " valueI" ; " CSS property2" : " value2" ;...}
Contoh:
<head>
<title>Embedded Style Sheet</title>
<style type=" text/css" >
P {font-family: arial, helvetica, sans-serif; font-size: 12pt; color: #FF0000}
</style>
</head>
<body>
<p>Tulisan ini menggunakan Embedded Style Sheed</p>
</body>
</html>
# Linked Style Sheet
Style disimpan dalam file yang berbeda dari file HTML dan disimpan dalam format ”*.css”.
Secara umum, linked style memili ciri-ciri:
- - Disimpan di file lain sehingga sebuah css dapat dipakai di banyak file HTML lainya
- - File hanya berisi style bukan tag HTML
Untuk menggunakan file lain yang berisi css pada file HTML, digunakan tag <link> yang ditempatkan pada bagian tag hedaer atau diantara <head>...</head>
Untuk menggunakan linked style sheet, setidaknya di butuhkan 2 file yang masing-masing berfungsi sebagai file css dan HTML.
- Pertama, buat file css dan simpan menggunakan nama mystyle.css denganisi script css sebagai berikut:
P {font-family: arial, helvetica, sans-serif; font-size: 12pt; color: #FF0000}
- Selanjutnya buat sebuah file HTML yang disimpan pada direktori yang sama dengan file css yang sudah dibuat dengan script HTML sebagai berikut :
<head>
<title>Linked Style Sheet</title>
<link rel=" stylesheet" hreft=" mystyle.css" type=" text/css" >
</head>
<body>
<p>Tulisan ini menggunakan Linked Style Sheed</p>
</body>
</html>
Aturan penulisan pada CSS
Sintak CSS dibagi dalam 3 bagian :
Selector{property:value}
Keterangan :
- -Selektor berisi tag HTML yang akan di definisikan (body, H1, font, dll)
- -Property merupakan atribut yang akan di-set/diubah
- -Value merupakan nilai dari property
Contoh penulisan CSS:
H1
{
Font-family : arial;
Color : #0000FF
}
H1 merupakan selector
Font-family merupakan property, dan
#0000FF merupakan value
H1, H2 {Color : #0000FF}
H1, H2 & H3 {Color : #0000FF}
Untuk menuliskan komentar pada CSS dapat menggunakan tanda:
- -/*.....*/ (titik-titik di isi komentar)
- -<!-- ....--> (titik-titik di isi komentar)
