Apa itu Cascading Style Sheets (CSS)?
Cascading Style Sheets atau CSS adalah teknologi standar yang digunakan untuk mengatur tampilan halaman HTML. CSS sering dianggap sebagai salah satu praktik terbaik dalam pengembangan antarmuka pengguna (UI) karena mengikuti prinsip desain separation of concerns, yaitu memisahkan antara konten dan tampilan.
Separation of Concerns
Sesuai dengan prinsip separation of concerns, CSS menyediakan satu tempat terpusat untuk mengatur elemen-elemen tampilan seperti font, warna teks, warna latar belakang, teks miring, atau teks yang ditebalkan untuk berbagai elemen HTML di dalam halaman web.
CSS juga bisa digunakan untuk mengatur layout berbagai bagian halaman — seperti header, footer, isi utama, artikel, section, atau aside. Ini sangat berguna saat konten perlu ditampilkan secara berbeda, misalnya saat dibuka di desktop, tablet, atau smartphone.
Sejarah CSS
Pada awal-awal kemunculan World Wide Web (WWW), file HTML sering berisi campuran antara konten, tag HTML, pengaturan tampilan, bahkan skrip JavaScript. Hal ini bikin halaman jadi susah dibaca, ditulis, dan dirawat.
Seiring perkembangan web, muncullah praktik terbaik untuk memisahkan file HTML, JavaScript, dan CSS agar lebih mudah dikelola. Jadi, di era modern, halaman web umumnya dibangun dari tiga bagian utama: file HTML, file JavaScript, dan file CSS eksternal.
Penerapan “Cascading” pada CSS
Istilah “cascading” pada CSS merujuk pada fakta bahwa style atau gaya bisa ditentukan di tiga level berbeda, atau disebut juga sebagai style levels.
Praktik terbaik adalah meletakkan semua style dalam file terpisah berekstensi .css. File ini dihubungkan ke HTML menggunakan tag <link>. Dalam satu halaman, kamu bisa pakai satu atau lebih file CSS eksternal menggunakan beberapa tag <link>.
<link rel=”stylesheet” type=”text/css” href=”https://www.theserverside.com/definition/what-is-css.css”>
Tapi, untuk proyek kecil atau jika kamu ingin menimpa (override) style tertentu dari CSS eksternal, kamu bisa menggunakan tag <style> di dalam file HTML — ini disebut internal style. Style di level ini akan menimpa aturan dari file CSS eksternal.
Inline vs. External Styles
Semua tag HTML5 juga punya properti style yang bisa digunakan untuk menulis style langsung di dalam tag itu sendiri. Ini dikenal sebagai inline style.
Urutan prioritas style yang digunakan itulah yang disebut cascading — style di level tag (inline) akan menimpa style dari internal CSS, dan style internal akan menimpa style dari CSS eksternal.
Sintaks CSS
Sintaks CSS cukup simpel. Pertama, kita sebut nama elemen atau selector, lalu diikuti dengan kurung kurawal yang berisi atribut dan nilainya, seperti font-size atau background-color.
Standar atribut CSS ini ditentukan oleh W3C (World Wide Web Consortium), meskipun kadang browser menambahkan atribut kustom mereka sendiri untuk fitur eksperimental yang belum resmi dirilis.
Cara Kerja CSS Selector
CSS selector bisa berupa nama tag HTML, class, ID, atau bahkan state tertentu dari elemen — misalnya saat tombol dalam kondisi disabled atau link sedang di-hover. Ini memberikan fleksibilitas yang besar bagi desainer untuk mengatur tampilan elemen sesuai kondisi atau kategori masing-masing.
Dengan selector, tampilan halaman bisa disesuaikan secara dinamis, sehingga lebih interaktif dan responsif terhadap perilaku pengguna.
Contoh HTML dan CSS
Berikut adalah contoh halaman HTML yang menggunakan internal style dan inline style secara bersamaan:
Kalau kamu perhatikan, teks yang tidak terkena style akan tampil standar — hitam di atas latar putih.
Desain Web Responsif
Teks dalam tag paragraf yang tidak punya inline style akan mengikuti aturan dari style internal, misalnya jadi biru, ukuran 14px, miring, dan punya background silver. Tapi kalau kita tambahkan inline style, maka properti tertentu bisa ditimpa — misalnya teks jadi putih, ukuran 20px, tapi tetap pakai background dan kemiringan dari style internal.
Spesifikasi CSS dikelola oleh W3C, dan versi terbaru yang saat ini paling banyak dipakai adalah CSS versi 3.