KAL
Menu

Apa itu CSS?

Sejarah singkat CSS, prinsip pemisahan konten dan penyajian, serta tempat CSS dijalankan.

Daftar isi

Topik ini mendefinisikan CSS sebagai bahasa penataan gaya web, menelusuri sejarah singkatnya dari 1996 hingga era modul, dan menjelaskan prinsip pemisahan konten dari penyajian. Bagian akhir menunjukkan tempat CSS dijalankan dan ditutup dengan demo perbandingan halaman dengan dan tanpa gaya. Setelah membacanya, istilah dasar seperti aturan, selector, dan deklarasi siap digunakan untuk membaca berkas CSS mana pun.

Definisi dan anatomi aturan CSS#

CSS adalah singkatan dari Cascading Style Sheets, bahasa lembar gaya (stylesheet) yang mendeskripsikan penyajian dokumen bermarkah. Dokumen bermarkah dalam konteks ini umumnya HTML, yang memuat struktur dan isi halaman. CSS tidak mengubah isi dokumen, melainkan menentukan cara isi itu ditampilkan, mulai dari warna dan ukuran huruf hingga jarak antar elemen dan tata letak keseluruhan. Browser membaca berkas CSS, mencocokkan aturan di dalamnya dengan elemen HTML, lalu menerapkan gayanya saat halaman dirender.

Satuan kerja terkecil CSS adalah aturan. Satu aturan terdiri atas dua bagian utama, yaitu penunjuk sasaran dan blok deklarasi. Contoh berikut memuat satu aturan lengkap beserta komentarnya:

css Contoh: aturan CSS pertama 
/* Satu aturan CSS lengkap dengan bagian-bagiannya */
h1 {
  color: #1e40af;
  font-size: 28px;
}

Bagian h1 sebelum kurung kurawal disebut selector, yaitu pola yang menentukan elemen mana yang dituju aturan. Isi di antara kurung kurawal disebut blok deklarasi, dan setiap pasangan seperti color: #1e40af merupakan satu deklarasi. Deklarasi tersusun atas properti (color) dan nilai (#1e40af) yang dipisahkan tanda titik dua lalu diakhiri tanda titik koma. Komentar diawali /* dan diakhiri */, dan isinya dilewati browser.

Sejarah singkat CSS#

CSS pertama kali ditetapkan sebagai standar pada tahun 1996 melalui spesifikasi CSS Level 1 yang diterbitkan oleh W3C (World Wide Web Consortium), organisasi standarisasi web. Versi kedua menyusul pada tahun 1998 dengan tambahan pemosisian dan dukungan media cetak. Setelah itu, cara penerbitan spesifikasi berubah sama sekali. Alih-alih menunggu satu versi besar, konsorsium memecah CSS menjadi modul-modul independen seperti CSS Color Module dan CSS Grid Module, sehingga setiap fitur berkembang dengan kecepatannya sendiri.

Model modular itulah yang berlaku sampai sekarang. Browser modern pada umumnya mendukung fondasi CSS lama, tetapi kepatuhan terhadap modul terbaru bersifat bertahap dan berbeda antar browser. Karena itu, dokumentasi resmi menyebut tingkat modul, misalnya Level 4 untuk modul warna, dan bukan nomor versi CSS yang tunggal.

Pemisahan konten dan penyajian#

Prinsip yang melatari CSS adalah pemisahan konten dari penyajian. HTML menyimpan struktur dan makna berupa judul, paragraf, daftar, dan tautan. CSS menyimpan keputusan penyajian berupa warna, ukuran, posisi, dan bentuk visual lainnya. Dengan pemisahan ini, satu berkas CSS dapat menata banyak halaman sekaligus, dan perubahan gaya cukup dilakukan di satu tempat.

Manfaat pemisahan juga dirasakan di luar tampilan visual. Pembaca layar (screen reader) bergantung pada struktur HTML, sedangkan CSS dapat menata ulang tampilan tanpa menyentuh struktur itu. Situs pun lebih mudah dipelihara karena penulis isi dan penulis gaya bekerja pada berkas yang berbeda. Pada halaman kecil manfaatnya terasa kecil, tetapi pada situs dengan puluhan halaman pemisahan ini menjadi kebutuhan.

Tempat CSS dijalankan#

CSS dijalankan di sisi browser, bukan di server. Berkas CSS diunduh bersama HTML, lalu diinterpretasikan oleh mesin perender (rendering engine) browser untuk menghasilkan tampilan. Chrome dan Edge menggunakan Blink, Firefox menggunakan Gecko, dan Safari menggunakan WebKit. Perbedaan mesin ini jarang menjadi masalah untuk fitur dasar karena kepatuhan terhadap standar dijaga bersama, tetapi fitur baru memang datang dengan waktu penerapan yang berbeda.

Media tempat CSS bekerja pun beragam. Browser berjalan pada komputer meja, ponsel, tablet, dan perangkat lain dengan ukuran layar yang berbeda-beda, dan CSS diuraikan ulang pada setiap perangkat tersebut. Selain layar, CSS juga digunakan untuk media cetak melalui aturan media query seperti @media print, sehingga halaman yang sama dapat disajikan di layar dan dicetak dengan gaya yang berbeda. Kemampuan ini menjadikan satu dokumen HTML cukup untuk banyak konteks penyajian.

Membandingkan halaman dengan dan tanpa CSS#

Perbedaan antara HTML polos dan HTML yang ditata CSS paling mudah diamati secara berdampingan. Demo berikut menampilkan dua kartu profil dengan isi HTML yang identik. Kartu kiri dirender tanpa satu aturan CSS pun, sehingga tampil sesuai gaya bawaan browser. Kartu kanan menerima gaya dari berkas index.css berupa latar kartu, sudut membulat, warna aksen, dan jarak antar bagian. Jalankan demo, bandingkan kedua kartu, lalu perhatikan bahwa judul, deskripsi, dan daftar keahliannya sama persis.

Kode sumber demo
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Kartu profil sebelum dan sesudah CSS</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <main>
    <h1>Kartu profil</h1>
    <p>Dua kartu dengan HTML identik. Kartu kiri tanpa CSS, kartu kanan dengan CSS.</p>

    <div class="wadah">
      <article class="kartu-polos">
        <h2>Citra</h2>
        <p>Anggota klub literasi sekolah.</p>
        <ul>
          <li>Merawat arsip buku</li>
          <li>Menyunting majalah dinding</li>
        </ul>
      </article>

      <article class="kartu">
        <h2>Citra</h2>
        <p>Anggota klub literasi sekolah.</p>
        <ul>
          <li>Merawat arsip buku</li>
          <li>Menyunting majalah dinding</li>
        </ul>
      </article>
    </div>
  </main>

<style>
/* Gaya halaman demo kartu profil */
body {
  font-family: sans-serif;
  background-color: #eef2f7;
  color: #1f2937;
  margin: 0;
  padding: 16px;
}

.wadah {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.wadah > article {
  flex: 1 1 220px;
  margin: 0;
}

/* Kartu kanan: satu-satunya bagian yang menerima gaya */
.kartu {
  background-color: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 16px 20px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
}

.kartu h2 {
  margin-top: 0;
  color: #1d4ed8;
}

.kartu ul {
  padding-left: 20px;
  margin-bottom: 0;
}

</style>
<style>
/* Gaya halaman demo kartu profil */
body {
  font-family: sans-serif;
  background-color: #eef2f7;
  color: #1f2937;
  margin: 0;
  padding: 16px;
}

.wadah {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.wadah > article {
  flex: 1 1 220px;
  margin: 0;
}

/* Kartu kanan: satu-satunya bagian yang menerima gaya */
.kartu {
  background-color: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 16px 20px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
}

.kartu h2 {
  margin-top: 0;
  color: #1d4ed8;
}

.kartu ul {
  padding-left: 20px;
  margin-bottom: 0;
}

</style></body>
</html>

Seluruh perbedaan visual pada kartu kanan berasal dari satu kelas bernama kartu yang ditata di CSS. Pada selector, kelas dipilih dengan tanda titik, dan hanya elemen yang membawa kelas itu yang menerima gayanya. Struktur HTML kedua kartu tidak berubah sedikit pun, sehingga isi tetap bersih dari detail penyajian. Inilah wujud paling ringkas dari prinsip pemisahan konten dan penyajian.

Kesalahan umum#

Kesalahan pertama adalah memperlakukan CSS sebagai bahasa pemrograman dengan alur logika. CSS bersifat deklaratif, yaitu menyatakan hasil akhir yang diinginkan dan menyerahkan penerapannya kepada browser, sedangkan perulangan dan percabangan tidak ada di dalamnya. Ekspektasi keliru ini biasanya muncul saat mencari loop untuk mengulang gaya. Perbaikannya, tuliskan aturan per selector dan biarkan aturan yang sama berlaku untuk semua elemen yang dicocokkan.

Kesalahan kedua adalah mencoba mengganti isi teks melalui CSS. CSS tidak mengubah isi dokumen, sehingga teks yang keliru harus diperbaiki di HTML. Properti content memang dapat menyisipkan teks melalui pseudo-element, tetapi mekanisme itu diperuntukkan bagi pelengkap visual seperti tanda kutip atau label kecil, bukan pengganti isi dokumen.

Kesalahan ketiga adalah menulis aturan CSS tanpa menautkan berkasnya di HTML, sehingga halaman tampil tanpa gaya. Penyebabnya umumnya atribut href yang salah atau nama berkas yang tidak persis sama. Gejalanya seluruh halaman tampil polos, dan perbaikannya adalah memeriksa kembali tautan stylesheet pada elemen link.

Ringkasan#

  • CSS adalah bahasa lembar gaya deklaratif yang mendeskripsikan penyajian dokumen HTML, sedangkan isi dan struktur tetap berada di HTML.
  • Satu aturan CSS terdiri atas selector, blok deklarasi, dan pasangan properti beserta nilainya.
  • Sejak CSS1 pada tahun 1996, CSS berkembang menjadi kumpulan modul independen yang diterbitkan terpisah.
  • CSS dijalankan oleh browser pada berbagai perangkat dan media, dan pemisahan konten dari penyajian membuat satu lembar gaya melayani banyak halaman.

Referensi#