Definisi dan fungsi cascading style sheet
Cascading Style Sheet atau lebih sering disebut dengan istilah CSS
merupakan salah satu dokumen website yang bertujuan untuk mengatur gaya
(style) tampilan website.
CSS bukanlah sebuah bahasa pemrograman, melainkan sebuah aturan untuk
mengendalikan beberapa komponen pada web sehingga akan lebih terstruktur,
seragam dan mudah dalam pengaturan saat pendesain sebuah halaman web.
CSS merupakan sekitar pembuatan dan pengaturan style font, warna, jarak,
bentuk, dan lain-lain yang tidak dapat dilakukan dengan elemen - elemen
HTML. Dapat dikatakan bahwa CSS merupakan pengembangan dari HTML
dalam hal format dokumen web. Adanya CSS memudahkan kita untuk
mengatur dan memilih sebuah website dan tampilannya karena CSS
memisahkan antara bagian presentasi dan isi dari web yang dibuat.
Selain itu dengan penggunaan dari CSS dalam pembuatan web akan
memberikan beberapa manfaat seperti berikut ini :
Kode HTML menjadi lebih sederhana dan lebih mudah diatur.
Ukuran file menjadi lebih kecil sehingga load file lebih cepat.
Mudah untuk mengubah tampilan, hanya dengan mengubah file
CSS saja.
Dapat berkolaborasi dengan JavaScript dan merupakan pasangan
setia HTML.
Dapat digunakan dalam hampir semua jenis web browser.
CSS merupakan sebuah teknologi internet yang di rekomendasikan oleh World
Wide Web Consortium atau W3C pada tahun 1996. Setelah CSS di
standarisasikan, internet explorer dan Netscape merilis browser terbaru yang
mendukung standar CSS. Terdapat tiga versi CSS, CSS1, CSS2, dan CSS3.
CSS 3 merupakan versi CSS terbaru yang masih dikembangkan oleh W3C.
Namun beberapa web browser sudah mendukung CSS 3. CSS 2 didukung
seutuhnya oleh CSS 3 dan tidak ada perubahan, hanya ada beberapa
penambahan. Ketika sebuah web yang semula menggunakan CSS 2
bermigrasi CSS 3, tidak perlu mengubah apapun.
Dengan adanya CSS mempermudah pengaturan dan pemeliharaan sebuah
website dan tampilannya karena CSS memisahkan antara bagian pengatur
gaya dan isi dari web.
Anatomi dari cascading style sheet
Bagian – bagian utama dari sebuah CSS itu terdiri dari tiga bagian yaitu:
selector, property, value. Jika dalam HTML dikenal ada tag-tag yang menyusun
sebuah dokumen HTML maka dalam CSS juga dikenal dengan sebutan
selector.
CSS memiliki aturan tersendiri dalam penulisan sintaks. Penulisan sintaks
tersebut terbagi ke dalam tiga bagian yaitu: selector, property, dan value.
Format penulisan bagian-bagian dari CSS dapat dituliskan sebagai berikut :
Selector{ Property : value; }
Berikut ini sedikit contoh penggunaan selektor, property, dan value untuk
mengatur style pada sebuah form
form{ margin-left:0; }
CSS memiliki aturan tersendiri dalam penulisan sintaks. Penulisan sintaks
tersebut terbagi ke dalam tiga bagian yaitu: selector, property, dan value.
Format penulisan bagian-bagian dari CSS dapat dituliskan sebagai berikut :
Selector{ Property : value; }
Dari contoh penggunaan selector, property, dan value di atas maka tiap bagian
akan di jelaskan sebagai berikut :
- form : selector yang akan di atur stylenya
- margin-left : property yang digunakan untuk jarak fieldset dari
batas kiri layout
- 0 : nilai dari property margin-left
Dengan adanya CSS memungkinkan untuk menampilkan halaman yang sama
dengan format yang berbeda.
Cara Kerja cascading style sheet
Cara kerja CSS dimulai saat deklarasi style yang diinginkan dengan menulis
style (selektor, id dan class), maka secara otomatis style tersebut akan
bekerja pada dokumen HTML. Dengan mengatur selektor, id, dan class,
untuk kemudian id dan class tersebut kita sesuaikan dan terapkan pada
kode HTML . Dan secara otomatis pula CSS itu akan bekerja pada file
HTML.
Pendefinisian style bisa dilakukan pada tag <style>. Di dalam pasangan tag
tersebut, pendefinisian style dilakukan dengan bentuk Selector { … } .
Dalam hal ini, selector bisa berupa selector HTML, selector kelas, atau selector
ID.
Selector HTML mendefinisikan style bagi suatu tag HTML. Contoh di depan
menggunakan selector HTML beruma img. Bentuk umumnya :
Contoh :
Nama-elemen { … }h:
