Pengertian CSS

Pengertian CSS

1. 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. Pemrograman Web


2. 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.

• Selector 

- nama-nama yang diberikan untuk style-style yang berbeda, baik itu style internal maupun eksternal - bagian elemen HTML yang akan ditunjuk untuk mengatur style
- dapat berupa class dan ID

• Property

- aturan dalam CSS untuk mengubah selector yang dipilih
- property mempunyai nilai yang disebut dengan value
- properties di dalam tanda { }

• value.

- Merupakan nilai dari property CSS
       CSS memiliki aturan tersendiri dalam penulisan sintaks. Penulisan sintaks tersebut terbagi ke dalam tiga bagian yaitu: selector, property, dan value.


Contoh
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; } 

             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 digunaka

n untuk jarak fieldset dari batas kiri layout
 - 0 : nilai dari property margin-left

3. 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:
                 Contoh : Img { Margin-topi: 10px; Float: left; }

Selektor class mendefinisikan kelas yang bisa berlaku untuk sebarang tag HTML. Bentuknya:
 Contoh : .nama-class { … } 
 Contoh : .kotak { Border: solid; }

Selector ID mendefinisikan style bagi elemen yang memiliki ID sesuai yang tercantum dalam selector. Bentuknya: #id { … }
 Contoh : #inggris {Font-weight:bold;Fontsize:1.2em;}