Masih di tutorial css dasar, kali ini kita akan membahas mengenai aturan cara penulisan kode css, jika sebelumnya sudah paham selector pada css, silahkan dilanjutkan, namun jika belum paham silahkan baca tutorial sebelumnya.
Dalam penulisan kode css ada berbagai cara yang bisa digunakan, namun yang perlu diingat bahwa css bukanlah sebuah bahasa pemrograman tetapi css tetap memiliki aturan cara penulisan kode css sama seperti sintaks lainnya.
Cara Penulisan Kode CSS
Penulis perlu membahas sedikit tentang selector, namun yang akan dibahas cara mendefinisikan selector agar dapat bekerja dengan kode css. Pada tutorial sebelumnya telah dibahas bahwa sebuah selector dapat berupa tag html itu sendiri atau bisa juga didefinisikan dengan menggunakan atribut class dan atribut id. Silahkan perhatikan gambar dibawah ini.
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…
<h1>Contoh Penulisan CSS</h1>Code language: HTML, XML (xml)Maka penulisan sintaks css sebagai berikut…
h1 {
color: yellow;
}Code language: CSS (css)Contoh penulisan selector dengan atribut class…
<h1 class="nama-selector">Definisi Selector Class</h1>Code language: HTML, XML (xml)Maka penulisan sintaks css sebagai berikut…
.nama-selector {
color: yellow;
}Code language: CSS (css)Contoh Penulisan selector dengan atribut id…
<h1 id="nama-selector">Definisi Selector ID</h1>Code language: HTML, XML (xml)Maka Penulisan sintaks css sebagai berikut…
#nama-selector {
color: yellow;
}Code language: CSS (css)Lalu misalkan muncul sebuah pertanyaan, bagaimana syarat cara penulisan kode css untuk penamaan selector?
Selector sebenarnya sama saja dengan variabel, yaitu dengan menggunakan huruf diawal, tidak boleh mengandung spasi, maka untuk pemisahnya bisa menggunakan simbol strip “-” (tanpa petik) atau garis bawah “_” (tanpa petik), selain itu penamaan selector bersifat case-sensitive, maka boleh lebih teliti lagi untuk mendefinisikan sebuah selector.
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.
* {
color: black;
}Code language: CSS (css)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:
ul em {
color: yellow;
}Code language: CSS (css)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:
body > p {
color: black;
}Code language: CSS (css)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:
.black {
color: black;
}Code language: CSS (css)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:
h1.black {
color: black;
}Code language: CSS (css)Selain itu anda dapat menggunakn atribut tag dengan nilai lebih dari satu, contohnya sebagai berikut:
<h1 class="center bold>Contoh Heading Center dengan Teks Bold</h1>
Lalu penulisan kode css-nya sebagai berikut…
.center {
text-align: center;
}Code language: CSS (css).bold {
font-weight: bold;
}Code language: CSS (css)atau…
.center.bold {
text-align: center;
font-weight: bold;
}Code language: CSS (css)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:
#black {
color: black;
}Code language: CSS (css)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.
h1, h2, h3 {
color: black;
}Code language: CSS (css)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.
body {
background-color: black;
color: white;
}Code language: CSS (css)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.
