Web Development

Memahami Apa Itu CSS, Istilah, dan Fungsi-fungsinya

Binar Academy
Memahami Apa Itu CSS, Istilah, dan Fungsi-fungsinya
Isi Halaman :

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.

apa-itu-css-1

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!

Satu declaration untuk CSS

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

Dua declaration untuk CSS

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:

Selector untuk CSS

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.

Grouping Selector untuk CSS

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.

Contoh property untuk CSS

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.

Contoh value untuk CSS

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.

Pesudo-class untuk CSS

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
Pseudo-element untuk CSS

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.

Padding untuk CSS

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~

Margin untuk CSS

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.

Contoh combinator untuk CSS

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.

Di luar itu, masih banyak lagi istilah-istilah lain yang lebih spesifik. Namun demikian, jangan khawatir kalau kamu ingin lebih banyak belajar coding. Kamu bisa coba belajar di Binar Academy melalui bootcamp Full-Stack Web Development! Untuk mendapatkan akses materi secara gratis, kamu bisa mengunduh aplikasi Binar Academy terlebih dahulu. Selamat belajar!

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

Kamu Punya Potensi Tersembunyi!

Temukan potensi dan rekomendasi bootcamp untuk kariermu dalam 3 menit
Coba Potensi Quiz

Bingung Mau Pilih Bootcamp yang Cocok Untukmu?

Potensi Quiz akan kasih rekomendasi bootcamp sesuai kepribadianmu dalam 3 menit
Coba Potensi Quiz
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Daftar Isi
Hi! 👋🏼  
Kamu bisa konsultasi kebutuhanmu di BINAR via WhatsApp ya