Subscribe Us

Pengenalan Awal tentang CSS: Sejarah dan Dasar Penggunaannya

ZYLINK.ID Juli 07, 2025
Pengenalan Awal tentang CSS

Apa Itu CSS?

CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mengatur tampilan dan tata letak elemen dalam halaman web. CSS bekerja berdampingan dengan HTML, yang digunakan untuk menyusun struktur konten, sedangkan CSS bertugas memberikan gaya (style) seperti warna, ukuran font, margin, layout, dan sebagainya.

Sejarah Singkat CSS

CSS pertama kali diperkenalkan oleh Håkon Wium Lie pada tahun 1994 saat bekerja di CERN (tempat yang sama di mana web pertama kali diciptakan oleh Tim Berners-Lee). Håkon mengusulkan CSS sebagai solusi atas keterbatasan HTML yang tidak dirancang untuk mengatur tampilan visual halaman web.

CSS mulai digunakan secara luas setelah CSS1 disahkan sebagai standar oleh W3C (World Wide Web Consortium) pada Desember 1996. Sejak itu, CSS terus berkembang melalui beberapa versi:

  • CSS1 (1996): Versi awal yang sederhana.
  • CSS2 (1998): Menambahkan fitur seperti positioning, z-index, media types.
  • CSS2.1: Perbaikan dari CSS2 yang lebih stabil.
  • CSS3 (2001 - sekarang): Terbagi dalam modul-modul seperti Flexbox, Grid, Animasi, Transisi, dan lainnya.
  • CSS4 (eksperimen): Belum resmi, tetapi beberapa fitur modern disebut sebagai bagian dari CSS level 4.

Fungsi dan Manfaat CSS

CSS memiliki banyak fungsi penting dalam pengembangan web:

  1. Memisahkan Konten dan Tampilan: HTML untuk struktur, CSS untuk tampilan.
  2. Konsistensi Desain: Gaya yang sama bisa digunakan di banyak halaman sekaligus.
  3. Efisiensi Pengembangan: Dengan satu file CSS, kita bisa mengatur seluruh website.
  4. Responsif dan Adaptif: CSS memungkinkan tampilan yang optimal di berbagai perangkat (desktop, tablet, smartphone).

Jenis-Jenis CSS

Ada tiga cara utama untuk menerapkan CSS:

1. Inline CSS
Ditulis langsung di dalam tag HTML.
Contoh:

<p style="color:red;">Teks merah</p>

2. Internal CSS
Dimasukkan di dalam tag <style> pada bagian <head> HTML.
Contoh:

<style>
  p { color: blue; }
</style>

3. External CSS
Ditulis dalam file terpisah (.css) dan dihubungkan ke file HTML.
Contoh file HTML:

<link rel="stylesheet" href="style.css">

Contoh Sederhana CSS

body {
  background-color: #f2f2f2;
  font-family: Arial, sans-serif;
}

h1 {
  color: #333333;
  text-align: center;
}

Kesimpulan

CSS adalah bagian penting dari pengembangan web modern. Dengan CSS, developer dapat menciptakan tampilan website yang menarik, profesional, dan responsif. Memahami sejarah dan dasar-dasar CSS adalah langkah awal yang penting sebelum mulai mempelajari teknik yang lebih lanjut seperti Flexbox, Grid, dan animasi CSS.

Tags: