» » Aturan Dasar Penulisan CSS

Aturan Dasar Penulisan CSS

Pengertian Selector, Declaration, Property dan
Value CSS

Selector, declaration, property dan value adalah inti dari CSS. 90% kode CSS yang kita buat
hanya terdiri dari ke-4 element ini. Agar lebih mudah dipahami, perhatikan kode CSS berikut:

h1 { font-size : 18px;
        color : green; }

Arti dari kode diatas adalah: temukan seluruh tag <h1> di dalam halaman HTML, kemudian set ukuran font sebesar 18 pixel dan set warna teks menjadi hijau.

Kode “h1” dari contoh diatas adalah selector CSS. Selector digunakan untuk mencari bagian mana dari HTML yang ingin di-style. CSS menyediakan beragam jenis selector, mulai dari yang sederhana seperti element selector, hingga yang cukup rumit seperti pseudo selector.

Dalam contoh diatas, “h1” dikenal sebagai element selector atau tag selector. Element selector digunakan untuk ‘mencari’ seluruh element HTML yang menggunakan tag tertentu, dimana dalam contoh kita adalah tag <h1>. Lebih jauh tentang selector akan saya bahas pada bab berikutnya.

Setelah penulisan selector, berikutnya: declaration. Declaration adalah kumpulan aturan style CSS yang berada di antara tanda kurung kurawal. Gambar berikut akan memperjelas pengertian selector dan declaration:

Di dalam declaration, terdapat pasangan property dan value. Property adalah jenis style, atau bagian apa yang akan diubah dari sebuah tag HTML. Misalnya jenis font, ukuran huruf, warna background, dll. Terdapat ratusan property di dalam CSS dan terus bertambah (terutama untuk property CSS3).

Agar bisa digunakan, sebuah property memiliki nilai satuan atau value. Value ini sangat bergantung kepada jenis property, misalnya untuk ukuran font bisa menggunakan satuan pixel, point, dll. Tapi untuk property warna (color) kita harus menggunakan value berupa nama warna atau kode RGB.

Keempat elemen inilah yang membangun CSS. Sepanjang buku ini kita akan membahas dengan detail tentang selector, property dan value CSS. Gambar berikut menampilkan bagian mana yang disebut selector, property dan value CSS:

Cara Penulisan Selector, Property dan Value

Seperti yang telah kita lihat sebelumnya, penulisan kode CSS cukup sederhana:
  1. Sebuah style di dalam CSS diawali dengan penulisan selector, yakni bagian apa dari HTML yang ingin diubah tampilannya.
  2. Setelah penulisan selector, seluruh property dan value (declaration) untuk selector tersebut harus berada di dalam tanda kurung kurawal.
  3. Penulisan property dengan value dipisah oleh tanda titik dua “ : ”.
  4. Antara satu property dengan property lain dipisah dengan tanda titik koma “ ; ”.
  5. Khusus untuk penulisan property terakhir, tanda titik koma “ ; ” boleh tidak ditulis, tapi
    sangat disarankan untuk tetap menambahkannya.