Cara Penulisan Kode CSS

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.

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…

<h1>Contoh Penulisan CSS</h1>

Maka penulisan sintaks css sebagai berikut…

h1 {
     color: yellow;
}

Contoh penulisan selector dengan atribut class…

<h1 class="nama-selector">Definisi Selector Class</h1>

Maka penulisan sintaks css sebagai berikut…

.nama-selector {
      color: yellow;
}

Contoh Penulisan selector dengan atribut id…

<h1 id="nama-selector">Definisi Selector ID</h1>

Maka Penulisan sintaks css sebagai berikut…

#nama-selector {
      color: yellow;
}

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.

Baca juga:  Mengatur Tabel Dengan CSS

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

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

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

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

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

Selain itu anda dapat menggunakn atribut tag dengan nilai lebih dari satu, contohnya sebagai berikut:

Baca juga:  Mengatur Link Dengan CSS

<h1 class=”center bold>Contoh Heading Center dengan Teks Bold</h1>

Lalu penulisan kode css-nya sebagai berikut…

.center {
    text-align: center;
}
.bold {
    font-weight: bold;
}

atau…

.center.bold {
    text-align: center;
    font-weight: bold;
}

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

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

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

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.