Mengenal CSS: Pengertian, Fungsi, dan Sejarah Perkembangannya

Setelah membahas dasar-dasar HTML, mulai dari membuat teks, link, hingga menampilkan gambar, sekarang kita masuk ke bagian penting lainnya dalam web programming, yaitu CSS (Cascading Style Sheets).

Jika HTML digunakan untuk membangun struktur sebuah halaman web, CSS digunakan untuk mengatur bagaimana struktur tersebut ditampilkan kepada pengguna.

Pada artikel pertama tentang CSS ini, kita belum akan membahas kode CSS yang kompleks. Kita akan mengenal terlebih dahulu apa itu CSS, mengapa CSS dibutuhkan, serta bagaimana teknologi ini berkembang hingga menjadi bagian penting dalam pembuatan website modern.

Apa Itu CSS?

CSS merupakan singkatan dari Cascading Style Sheets. CSS adalah bahasa yang digunakan untuk mengatur tampilan dan presentasi elemen-elemen HTML pada sebuah halaman web.

Sederhananya, HTML dapat diibaratkan sebagai struktur sebuah bangunan, sedangkan CSS digunakan untuk mengatur tampilan bangunan tersebut, seperti warna, ukuran, jarak, posisi, dan tata letaknya.

Dengan CSS, kita dapat mengatur berbagai aspek tampilan website, antara lain:

Warna teks dan latar belakang
Jenis dan ukuran font
Jarak antar elemen
Ukuran elemen
Posisi elemen
Tata letak halaman
Tampilan yang menyesuaikan berbagai ukuran layar
Animasi dan transisi

Mengapa CSS Dibutuhkan?

Sebelum CSS digunakan secara luas, pengaturan tampilan halaman web banyak dilakukan langsung melalui elemen dan atribut HTML.

Cara tersebut mungkin masih dapat digunakan untuk halaman sederhana. Namun, semakin besar sebuah website, semakin sulit pula pengelolaannya jika struktur konten dan aturan tampilannya tercampur.

Bayangkan sebuah website memiliki puluhan atau ratusan halaman dengan tampilan yang sama. Jika warna atau ukuran teks harus diubah, akan jauh lebih praktis apabila aturan tampilannya dapat dikelola dari satu atau beberapa file CSS.

Karena itulah CSS memiliki peran penting dalam memisahkan struktur dan konten dari presentasi atau tampilan sebuah website.

Dengan pemisahan tersebut, kode HTML dapat menjadi lebih terstruktur dan aturan desain dapat dikelola dengan lebih mudah.

Sejarah Perkembangan CSS

CSS tidak langsung hadir dalam bentuk seperti yang kita kenal sekarang. Teknologi ini berkembang secara bertahap mengikuti kebutuhan web yang semakin kompleks.

Berikut gambaran singkat perkembangan CSS dari awal hingga era modern.

1. Konsep CSS Mulai Diusulkan pada 1994

Konsep CSS pertama kali diusulkan oleh Håkon Wium Lie pada tahun 1994 ketika ia bekerja di CERN.

Pada masa tersebut, World Wide Web sedang berkembang dan kebutuhan untuk mengatur tampilan halaman web menjadi semakin besar.

Salah satu tujuan utama CSS adalah menyediakan cara yang lebih terstruktur untuk mengatur tampilan dokumen web tanpa harus mencampurkan aturan presentasi secara langsung dengan struktur HTML.

Gagasan ini kemudian terus dikembangkan hingga menjadi standar web yang digunakan secara luas.

2. CSS Level 1 pada 1996

Pada Desember 1996, World Wide Web Consortium (W3C) menerbitkan rekomendasi CSS Level 1.

CSS Level 1 menyediakan berbagai kemampuan dasar untuk mengatur tampilan dokumen, termasuk:

Font
Warna teks
Warna dan gambar latar belakang
Jarak antar elemen
Perataan teks
Beberapa aspek dasar tampilan elemen

Walaupun kemampuannya masih terbatas dibandingkan CSS modern, CSS Level 1 menjadi salah satu langkah penting dalam perkembangan standar styling untuk web.

3. CSS Level 2 pada 1998

Perkembangan CSS berlanjut dengan hadirnya CSS Level 2 pada tahun 1998.

Versi ini membawa berbagai kemampuan baru untuk mengatur tampilan halaman web, termasuk positioning, pengaturan lapisan elemen melalui z-index, serta media types.

Dengan kemampuan tersebut, pengembang memiliki lebih banyak kontrol terhadap bagaimana elemen ditampilkan dalam berbagai kondisi.

4. CSS 2.1

Setelah CSS Level 2, spesifikasi tersebut kemudian mengalami penyempurnaan.

CSS 2.1 dikembangkan untuk memperbaiki sejumlah masalah dan memperjelas bagian-bagian tertentu dari spesifikasi CSS sebelumnya.

CSS 2.1 kemudian menjadi salah satu standar penting yang banyak digunakan dalam pengembangan website sebelum berbagai modul CSS modern berkembang lebih jauh.

5. Perkembangan CSS Modern

Berbeda dengan pendekatan versi awal, perkembangan CSS modern lebih banyak dilakukan melalui modul-modul spesifikasi.

Karena itu, istilah CSS3 sering digunakan untuk menggambarkan generasi fitur CSS modern, tetapi CSS saat ini tidak lagi berkembang sebagai satu versi besar yang harus menunggu seluruh fiturnya selesai sekaligus.

Berbagai modul CSS terus dikembangkan secara terpisah sesuai kebutuhan dan proses standardisasi.

Beberapa teknologi CSS yang sangat penting dalam pengembangan web modern antara lain:

Animasi dan Transisi

CSS menyediakan transition dan animation yang memungkinkan pengembang membuat perubahan tampilan dan animasi tanpa harus selalu menggunakan JavaScript.

Contohnya adalah perubahan warna tombol ketika pengguna mengarahkan kursor ke atasnya.

Border Radius dan Box Shadow

CSS juga menyediakan berbagai properti visual seperti border-radius untuk membuat sudut elemen menjadi melengkung dan box-shadow untuk memberikan efek bayangan.

Properti tersebut banyak digunakan dalam desain antarmuka website modern.

Flexbox

Flexbox memudahkan pengembang mengatur posisi dan distribusi elemen dalam sebuah container.

Teknologi ini sangat berguna untuk membuat berbagai jenis layout yang dapat menyesuaikan ukuran layar.

CSS Grid

CSS Grid menyediakan sistem layout berbasis grid yang memungkinkan pengembang membuat struktur halaman yang lebih kompleks dengan cara yang terorganisir.

Flexbox dan Grid kini menjadi bagian penting dalam pembuatan layout website yang responsif.

Mengapa CSS Penting dalam Pengembangan Website?

CSS bukan sekadar teknologi untuk mempercantik halaman web. Penggunaan CSS yang baik dapat membantu pengembang membuat tampilan website yang lebih terstruktur, konsisten, responsif, dan mudah dikelola.

Dengan memisahkan HTML sebagai struktur dan CSS sebagai aturan tampilan, perubahan desain dapat dilakukan tanpa harus mengubah seluruh struktur konten.

Pendekatan tersebut menjadi semakin penting ketika website memiliki banyak halaman dan komponen.

Kesimpulan

CSS merupakan salah satu teknologi dasar dalam pengembangan web yang berfungsi untuk mengatur tampilan elemen HTML.

Perkembangannya dimulai dari konsep yang diusulkan pada tahun 1994, kemudian berkembang melalui CSS Level 1, CSS Level 2, CSS 2.1, hingga berbagai modul CSS modern yang terus dikembangkan sampai sekarang.

Bagi pemula, memahami konsep dasar CSS akan menjadi langkah penting sebelum mempelajari berbagai teknik styling dan layout yang lebih lanjut.

Pada tutorial berikutnya, kita akan mulai masuk ke bagian yang lebih praktis, yaitu 3 Cara Memasang CSS pada File HTML.

Jika ada bagian dari sejarah CSS yang ingin didiskusikan atau ada pertanyaan mengenai materi ini, silakan tuliskan di kolom komentar.

Selamat belajar dan sampai jumpa di tutorial berikutnya.

Ramdanifikri.id

Tutorial CSS Dasar #1: Mengenal Apa Itu CSS dan Sejarah Perkembangannya