Cara Penulisan Kode CSS

Dalam penulisan kode css ada berbagai cara yang bisa digunakan, namun yang perlu diingat bahwa css bukanlah sebuah bahasa pemrograman, css tetap memiliki aturan dan cara penulisan kode css sama seperti sintaks lainnya.

Cara Penulisan Kode CSS

Dari gambar diatas sudah jelas bahwa selector bisa berupa tag html, atribut class dan atribut id. Namun perlu diingat bahwa apabila menggunakan atribut id pada sebuah tag html maka hanya dapat digunakan sekali saja, berbeda dengan class, anda dapat mendefinisikan sebuah class lebih dari satu di tag html.

Contoh penulisan selector dengan tag html :

Maka penulisan sintaks css sebagai berikut :

Contoh penulisan selector dengan atribut class :

Maka penulisan sintaks css sebagai berikut :

Contoh Penulisan selector dengan atribut id :

Maka Penulisan sintaks css sebagai berikut :

Aturan Penulisan Kode CSS

Ada beberapa aturan penulisan kode css yang perlu dipahami, aturan-aturan ini mempermudah dalam melakukan koding kode css. Kadang jika menggunakan atribut class yang lebih dari satu kita hanya ingin menentukan gaya dari beberapa tag html bersarang dimana masing-masing anak dari tag html tersebut berbeda gaya meskipun penamaan selectornya sama. Berikut ini semua penjelasan mengenai aturan penulisan kode css.

• Universal Selector
  Maksud dari universal selector ini seperti sebuah variabel global, yakni kita akan menentukan semua tag html memiliki gaya yang sama tanpa perlu menulis satu persatu selector tag tersebut. Yaitu dengan menggunakan simbol bintang.
  
• Selector Turunan
  Jika pada sebuah tag html didalamnya terdapat tag html (nested/bersarang) sebenarnya untuk mengatur tag didalam tag bersarang tersebut bisa dengan menggunakan tag sebelumnya atau tag parent, namun terkadang kita ingin berbeda dengan tag sebelumnya, misalkan tag “<ul>” didalamnya terdapat tag “<em>”, sebagai berikut:
  
  Cara diatas akan mempengaruhi seluruh tag <em> yang ada didalam tag <ul> dan tidak peduli meskipun tag <em> diawali dengan tag lainnya.
• Selector Anak/Child
  Berbeda dengan selector turunan, selector child/anak ini hanya akan berfungsi jika tag tersebut benar-benar berada pada dibawah tag parent. Bagaimana jika didahului dengan tag lain? jawabannya, tidak bisa. Contohnya sebagai berikut:
  
• Selector atribut class
  Selector dengan atribut class sering digunakan, karena sifatnya tidak tunggal, maksudnya seperti penjelasan diatas, yaitu dapat digunakan lebih dari satu pada setiap tag html. Cara penulisannya sebagai berikut:
  
  Namun selector class sebenarnya dapat dibatas juga, misalkan menggunakan selector class sama pada tag yang berbeda, contohnya pada tag <h1 class=”black”> dan <p class=”black”> dimana anda hanya ingin menentukan sebuah gaya css pada tag h1, caranya sebagai berikut:
  
  Selain itu Anda dapat menggunakn atribut tag dengan nilai lebih dari satu, contohnya sebagai berikut:

  Lalu penulisan kode css-nya sebagai berikut :

  

  

  atau
  

• Selector Atribut ID
  Seperti lawa dikatakan bahwa atribut ID hanya dapat digunakan sekali pada setiap file di HTML, karena ID bersifat seperti primary variabel atau variabel kunci. Namun cara penggunaannya sama seperti atribut class bedanya adalah tanda yang digunakan, berikut ini contohnya:
  
• Grouping Selector
  Apa maksud dari grouping selector? grouping selector adalah apabila sebuah tag atau nama class atau ID yang digunakan memiliki kesamaan, kita dapat melakukan grouping dari masing-masing tag atau class atau ID, contohnya apabila ingin menentukan warna yang sama pada tag heading h1, h2, dan h3.
  
• Multiple Style Rules
  Maksud dari multiple style rules yaitu apabila sebuah selector memiliki gaya yang berbeda contohnya antara warna teks dan background element, kita dapat menggunakan metode multiple style rules, dan ini adalah cara yang benar yang bisa kita gunakan secara bersamaan, sehingga tidak perlu penulis selector perbaris. Berikut ini contohnya.
  
  Jika dilihat sintaks css diatas, sebuah aturan penulisan kode css diakhiri dengan tanda titik koma “;” (tanpa petik), maksudnya adalah untuk mengakhiri gaya tersebut pada tiap-tiap aturan gaya.

Demikianlah tutorial cara penulisan kode css, cara diatas bisa langsung dipraktekan dalam penulisan kode css pada proyek belajar. Tutorial akan dilanjutkan pada tutorial berikutnya.