Binar Academy — Buat kamu yang sedang atau baru belajar HTML pasti sudah nggak asing lagi dong mendengar yang namanya CSS! Konon katanya, bikin website rasanya kurang afdol kalau belum ada CSS. Betul nggak sih? Supaya gak penasaran, yuk kita cari tahu apa itu CSS beserta istilah-istilah yang dimilikinya!

Apa Itu CSS?

Cascading Style Sheets, atau yang disingkat CSS ini adalah bahasa dalam pemrograman untuk menentukan bagaimana dokumen itu disajikan. CSS berfungsi untuk menjelaskan dan menata tampilan elemen yang tertulis pada bahasa markup, salah satunya adalah HTML. Dalam arti lain, CSS-lah yang menjelaskan bagaimana elemen HTML di balik layar ditampilkan sedemikian rupa di layar website-mu nanti. Baik HTML maupun CSS, keduanya saling melengkapi.

Nah, sebagai developer, kita dituntut untuk bisa konsisten dan teliti. Salah paham atau salah coding dikit aja bisa berakibat fatal. Apalagi di CSS nanti kita akan menemukan berbagai elemen dan istilah-istilah yang cukup beragam. Karenanya, sebelum melangkah terlalu jauh, kita kenalan dulu yuk dengan istilah-istilah CSS dan kegunaannya di bawah ini!

Istilah-istilah CSS dan Fungsinya

Di dalam bahasa pemrograman CSS ada pula beberapa istilah di dalamnya yang wajib untuk kamu pahami. Seperti:

1. Comment

Comment digunakan untuk menjelaskan code. Meski nantinya comment nggak ditampilkan di layar, namun ia dapat membantumu untuk mengedit maupun mendokumentasikan code. Oleh karena itu, kamu bisa menambahkan comment di manapun dan seperlumu.

Comment sendiri berada dalam elemen <style>, dan biasanya berupa garis miring (/) dan bintang (*), seperti yang bisa dilihat pada gambar berikut ini.

2. Declaration

Declaration merupakan satu baris code pada CSS (tidak termasuk comment) yang biasanya ditandai dengan kurung kurawal buka ({) dan kurung kurawal tutup (}. Coba perhatikan gambar berikut!

Kalau yang di bawah ini merupakan contoh untuk dua atau lebih declaration.

3. Selector

Pada CSS, selector digunakan untuk memilih elemen mana dari HTML yang akan ditargetkan atau dipengaruhi. Seperti contoh, apabila kita ingin mengatur posisi teks atau warna teks, cara memilihnya adalah dengan memakai selector.

Selector ditandai dengan tag h1, h2, p, a, div, body, dan tag lainnya, seperti:

Selain itu, selector juga beragam jenisnya (selengkapnya lihat di sini). Grouping selector adalah salah satunya, yang mana semua elemen HTML-nya dikelompokan sekaligus untuk meminimalisasi code, seperti contoh di bawah ini.

4. Property

Property pada CSS digunakan untuk menambahkan atau mengatur ukuran teks, jenis font, warna teks, warna background, dan sebagainya. Pada aturan CSS, kita juga bisa menggunakan property sebanyak yang kita inginkan. Masing-masingnya berlaku untuk elemen yang diterapkan selector.

Property muncul sebelum titik dua (:) dan sesudah titik koma (;) di setiap barisnya, seperti pada gambar di bawah ini.

5. Value

Selanjutnya, ada Value. Di CSS, value atau nilai adalah apa yang muncul setelah titik dua (:) di setiap barisnya. Pada gambar di bawah ini, ‘24px’ merupakan value-nya.

6. Pseudo-class

Kurang lebih, pseudo-class bekerja serupa dengan CSS class pada umumnya, hanya saja nggak secara eksplisit dideklarasikan di HTML. Adapun kegunaan pseudo-class adalah untuk mendefinisikan suatu keadaan dari suatu elemen. Berikut adalah contoh dari pseudo-class.

7. Pseudo-element

Pseudo-element pada CSS digunakan untuk mengedit bagian tertentu dari sebuah elemen. Berbeda dari pseudo-class, pseudo-element menargetkan elemen ‘virtual’ yang dapat berubah tergantung pada HTML yang sebenarnya. Selain itu, pseudo-element juga digunakan untuk:

• Mengatur jenis huruf pertama, atau baris pertama dari sebuah elemen
• Menyisipkan konten sebelum/setelah konten suatu elemen

8. Padding

Padding digunakan untuk membuat jarak antara konten dan border elemen. Kita dapat mengatur padding untuk setiap sisi elemen, baik ke atas atau bawah, maupun kanan atau kiri. Berikut contoh penerapannya.

9. Margin

Pada CSS, margin digunakan untuk membuat space atau ruang di sekitar elemen, di luar batas yang ditentukan. Di sini, kita memegang kendali untuk mengatur margin di setiap elemen CSS, yaitu di atas, kanan, bawah, dan kiri. Perhatikan gambar di bawah ini ya~

Jangan sampai ketukar ya~ Padding itu adalah jarak, sedangkan margin itu adalah ruang

10. Combinator

Kegunaan combinator pada CSS adalah untuk menggabungkan dua selector sekaligus. Terdapat empat jenis combinator, yaitu:

• descendant selector yang ditandai dengan spasi (spasi)
• child selector yang ditandai dengan tanda kurung siku (>)
• adjacent sibling selector yang ditandai dengan tanda tambah (+)
• general sibling selector yang ditandai dengan tanda gelombang (~)

Contoh penggunaannya adalah sebagai berikut.

Dan tentunya, masih banyak lagi! 😜

Bagaimana? Sekarang kamu sudah lebih tahu kan apa itu CSS! Banyak juga ya istilah-istilah CSS yang perlu dipahami. Nah, istilah-istilah CSS yang disebutkan di atas adalah istilah yang paling sering dan umum digunakan di CSS.

‍

Baca juga: 9 Situs Belajar Coding Online Gratis Terbaik untuk Pemula