Apa Itu CSS: Pengertian, Cara Kerja, dan Contoh

CSS adalah bahasa yang mengatur tampilan halaman web: warna, ukuran huruf, jarak antarbagian, dan tata letaknya di layar.

Daftar Isi

• Beda CSS dan HTML
• Cara Kerja CSS
• Contoh Kode CSS Sederhana
• Kenapa Penting untuk Anak

Nama lengkapnya Cascading Style Sheets. Perumpamaan yang paling sering dipakai: kalau HTML adalah kerangka rumah, CSS adalah cat, ubin, dan perabotnya. Rumah tanpa cat tetap bisa ditinggali, tetapi tidak ada yang betah memandanginya.

Beda CSS dan HTML

Keduanya bukan bahasa pemrograman dalam arti sempit, karena tidak berisi logika seperti perulangan atau percabangan. Untuk membuat halaman bergerak dan bereaksi, dibutuhkan bahasa ketiga yaitu JavaScript.

Cara Kerja CSS

CSS bekerja dengan aturan yang punya dua bagian: penunjuk sasaran dan daftar sifat. Penunjuk sasaran memberi tahu bagian mana yang akan diatur, dan daftar sifat menjelaskan bagaimana bagian itu harus tampil.

Satu aturan bisa mengenai banyak bagian sekaligus. Menuliskan bahwa semua judul berwarna biru cukup sekali, dan seluruh judul di seluruh halaman ikut berubah. Inilah kekuatan terbesarnya: mengubah tampilan ratusan halaman dari satu berkas.

Kata cascading dalam namanya berarti bertingkat. Kalau dua aturan bertabrakan, ada urutan yang menentukan pemenangnya, umumnya aturan yang lebih spesifik dan yang ditulis belakangan.

Contoh Kode CSS Sederhana

Aturan yang membuat semua judul utama berwarna biru dan rata tengah ditulis kira-kira seperti ini: sasarannya h1, lalu di dalam kurung kurawal ada dua sifat, yaitu color bernilai blue dan text-align bernilai center.

Sifat yang paling sering dipakai anak saat pertama belajar hanya ada lima: color untuk warna tulisan, background-color untuk warna latar, font-size untuk ukuran huruf, margin untuk jarak di luar sebuah bagian, dan padding untuk jarak di dalamnya. Lima sifat ini sudah cukup membuat halaman terlihat rapi.

Kenapa Penting untuk Anak

CSS biasanya menjadi momen ketika coding berhenti terasa abstrak. Anak mengetik satu baris, menekan simpan, dan warna di layar langsung berubah. Umpan balik secepat itu jarang ada di pelajaran lain, dan itulah yang membuat banyak anak ketagihan.

Ada manfaat kedua yang sering terlewat. CSS adalah pertemuan pertama antara logika dan rasa estetika. Anak harus memutuskan warna apa yang enak dilihat, seberapa besar jarak yang nyaman, dan bagaimana susunan yang mudah dibaca. Keterampilan ini menyeberang langsung ke desain grafis, dan sering menjadi jembatan bagi anak yang lebih tertarik menggambar daripada berhitung.

Di kursus coding Algonova, HTML dan CSS diajarkan lewat proyek halaman pribadi yang bisa anak tunjukkan ke keluarga. Ingin melihat levelnya? Ikuti kelas coding gratis.