Cascading Style Sheets (CSS) adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup. CSS diperkenalkan untuk perkembangan website pada tahun 1996. Nama CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat diletakan secara berurutan, yang kemudian akam membentuk hubungan parent-chile pada setiap style.
Penggunaan yang paling umum dari CSS adalah untuk memformat halaman web yang ditulis dengan HTML dan XHTML. Spesifikasi CSS diatur oleh World Wide WebConsurtium (W3C).CSS memmungkinkan halaman yang sama untuk ditampilkan dengan cara yang berbeda untuk metode persentasi yang berbeda, seperti melalui layar, cetak, suara (suwaktu dibacakan oleh browser basis-suara atau pembaca layar), dan juga alat pembaca braille. Halaman HTML atau XML yang sama juga dapat di tampilkan secara berbeda, baik dari segi gaya tampilan atau sekema warna dengan menggunakan CSS.
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:
<html>
<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 :
<html>
<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
}
Keterangan:
H1 merupakan selector
Font-family merupakan property, dan
#0000FF merupakan value
Untuk mendeklarasikan property secara berkelompok, dapat menggunakan penghubung koma (,) dan & contoh :
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)
[Download E-book]
