13/07/2015

Aturan Penulisan Sintaks CSS

13/07/2015

Dalam penulisan CSS ada beberapa aturan yang perlu kita ketahui agar membuatnya dapat berfungsi seperti yang kita harapkan. Seperti yang sudah saya tuliskan di bagian ini (Mengenal dan Memahami Dasar CSS), bahwa sintaks dalam CSS terdiri dari 2 bagian utama yaitu
  1. Selector (selektor)
  2. Declaration (deklarasi)
    • Property (properti)
    • Value (nilai)
sintaks css
sumber gambar: w3c

6 Aturan Dasar Penulisan CSS

Agar CSS berfungsi, kedua hal di atas harus selalu ada dalam penulisannya. Namun tidak sampai disitu saja, ada beberapa aturan penulisan CSS yang perlu kita ketahui dan jika kita mengabaikan aturan-aturan ini, maka CSS tidak akan berjalan seperti yang kita harapkan. Sebagai gambaran umum, perhatikan terlebih dahulu sintaks CSS berikut

h1 {font-style:normal; font-weight:bold; text-align: center; color: Green}

Dari penulisan kode CSS di atas, setidaknya saya telah merangkum ada enam aturan dasar dalam penulisan sintaks CSS seperti berikut,
  1. Penulisan CSS diawali dengan selector (pada kode CSS di atas menggunakan tag h1)
    • h1 {font-style:normal}
  2. kemudian diikuti dengan tanda kurawal (   {   ) untuk membungkus property dan value nya. 
    • h1{font-style:normal}
  3. Dalam penulisan property dan value, jangan lupa untuk memisahkan keduanya dengan karakter (  :   ) titik dua. 
    • h1 {font-style:normal}
  4. Apabila kita ingin menerapkan lebih dari satu property, maka tandai dengan karakter titik atas dan koma bawah (  ;  ), tepat di belakang value dari property sebelumnya.
    • h1 {font-style:normal; color: Green; font-weight:bold; text-align: center}
  5. Property yang memiliki 2 kata, dipisah dengan tanda penghubung (-).
    • h1 {font-style:normal; color: Green; font-weight:bold; text-align: center}
  6. Apabila sudah tidak ada lagi property dan value yang ingin kita tuliskan, maka akhiri dengan tanda (  }   ) untuk menutup bungkus.
    • h1 {font-style:normal; color: Green; font-weight:bold; text-align: center}

Contoh Penulisan Sintaks CSS

h1 {font-style:normal; font-weight:bold; text-align: center; color: Green}


Pelajari lebih lanjut tentang Jenis selector (selektor) dan declaration (deklarasi) pada bagian ini