Pengertian CSS: Fungsi dan Sejarah
[Cascading Style Sheets]
Muhammad Subkha
Kalau sebelumnya kita sudah membahas tentang HTML yang berfungsi sebagai pondasi atau kerangka dalam pembuatan website, maka langkah selanjutnya adalah mengenal CSS. HTML sendiri hanya mampu membuat struktur dan menampilkan konten, namun tampilannya sangat sederhana dan monoton, misalnya hanya berupa teks hitam di atas background putih, link biru, serta tanpa adanya pengaturan warna, ukuran, atau tata letak yang menarik.
Bayangkan jika semua website yang kita buka tampilannya hanya seperti itu, tentu akan terasa membosankan, tidak enak dilihat, dan kurang profesional.
Inilah alasan mengapa CSS sangat penting dalam pengembangan website. Dengan adanya CSS, seorang developer atau desainer web dapat mempercantik tampilan HTML, mulai dari mengubah warna teks, mengatur jarak antar elemen, membuat layout halaman, hingga menambahkan animasi dan efek visual.
Jadi, jika HTML diibaratkan sebagai kerangka rumah, maka CSS adalah cat, wallpaper, dekorasi, dan tata ruang yang membuat rumah tersebut indah dan nyaman untuk ditinggali.
Pengertian CSS (Cascading Style Sheets)
CSS adalah singkatan dari Cascading Style Sheets, yaitu bahasa stylesheet yang digunakan untuk mengatur tampilan (style) halaman web.
Dengan CSS, kita bisa mengatur:
Warna teks dan background
Jenis dan ukuran font
Jarak antar elemen
Posisi layout (header, sidebar, footer)
Animasi, transisi, dan efek visual
Sederhananya, HTML adalah kerangka, sedangkan CSS adalah dekorasi. Jika HTML hanya menampilkan teks biasa, maka CSS-lah yang membuat tampilan tersebut menarik dan sesuai dengan desain yang diinginkan.
Daftar Isi
Daftar Isi
Sejarah CSS
CSS pertama kali dikembangkan oleh Håkon Wium Lie pada tahun 1994, yang saat itu bekerja bersama Tim Berners-Lee (penemu HTML). Ia merasa HTML terlalu terbatas dalam mengatur tampilan, sehingga dibuatlah CSS sebagai solusi untuk memisahkan struktur (HTML) dan desain (CSS).
Perkembangan CSS:
1996 – CSS Level 1 resmi dirilis oleh W3C.
1998 – CSS Level 2 hadir, mendukung positioning, media types, dan font.
2005 – CSS2.1 digunakan sebagai standar baru.
2009–sekarang – CSS3 dikembangkan dengan banyak fitur modern seperti flexbox, grid, animation, dan transition.
Saat ini CSS3 sudah menjadi standar yang dipakai di seluruh dunia, membuat website bisa tampil lebih modern, responsif, dan mobile-friendly.
Fungsi CSS
Berikut beberapa fungsi utama CSS:
Mempercantik Tampilan Website
Dengan CSS, website tidak lagi monoton. Warna, font, background, dan layout bisa diatur sesuai keinginan.Memisahkan Struktur dan Desain
HTML hanya fokus ke konten/struktur, sementara CSS mengatur tampilan. Hal ini membuat kode lebih rapi dan mudah dipelihara.Menghemat Waktu dalam Pengembangan
Satu file CSS bisa digunakan di banyak halaman HTML. Jadi, cukup ubah satu file CSS, maka semua tampilan halaman akan ikut berubah.Membuat Website Responsif
CSS mendukung media query, yang memungkinkan tampilan website menyesuaikan ukuran layar (desktop, tablet, smartphone).Mendukung Animasi dan Interaktifitas Visual
Tanpa JavaScript pun, CSS mampu memberikan efek animasi sederhana, transisi, dan hover effect yang mempercantik user experience.
Contoh Kode CSS
Berikut contoh sederhana penggunaan CSS:
Hasilnya:
Background abu-abu muda
Judul berwarna biru dan rata tengah
Paragraf berwarna abu gelap
Link berwarna merah, tapi berubah jadi hijau saat kursor diarahkan
Penutup
Jadi, CSS adalah bahasa pendamping HTML yang berfungsi untuk mengatur tampilan dan desain website. Dengan CSS, website menjadi lebih menarik, profesional, dan responsif.
Kalau HTML diibaratkan kerangka rumah, maka CSS adalah cat, wallpaper, dekorasi, dan tata ruangnya. Maka dari itu, setelah menguasai HTML, belajarlah CSS untuk membuat website yang lebih indah dan nyaman dilihat.