Baricode LMS - Pengenalan CSS

Pengenalan CSS 🎨

Sebelum mulai menulis kode CSS, penting untuk memahami apa itu CSS, mengapa ia ada, dan bagaimana hubungannya dengan HTML yang sudah kamu pelajari sebelumnya.

Apa itu CSS?

CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mengatur tampilan dan gaya dari elemen-elemen HTML di halaman web. Jika HTML adalah kerangka atau struktur sebuah rumah, maka CSS adalah cat, furnitur, pencahayaan, dan dekorasi yang membuatnya indah dan nyaman.

Tanpa CSS, semua halaman web hanya menampilkan teks hitam polos di latar putih — tidak ada warna, tidak ada ukuran font yang bervariasi, tidak ada layout yang menarik.

<!-- HTML tanpa CSS -->
<h1>Judul Halaman</h1>
<p>Ini adalah paragraf biasa.</p>

<!-- Dengan CSS, tampilan bisa sepenuhnya berubah -->
<style>
  h1 { color: #2563eb; font-size: 36px; }
  p  { color: #6b7280; line-height: 1.8; }
</style>

Sejarah Singkat CSS

CSS pertama kali diperkenalkan oleh Håkon Wium Lie pada tahun 1994 dan resmi dirilis sebagai standar oleh W3C pada tahun 1996 (CSS1). Sejak itu CSS terus berkembang:

Versi	Tahun	Fitur Utama
CSS1	1996	Font, warna, margin dasar
CSS2	1998	Positioning, media types
CSS3	2011+	Flexbox, animasi, variabel, grid

CSS3 tidak dirilis sekaligus — melainkan dikembangkan sebagai modul-modul terpisah yang terus diperbarui hingga hari ini.

Bagaimana CSS Bekerja?

CSS bekerja dengan cara menyeleksi elemen HTML lalu menerapkan deklarasi gaya padanya. Setiap aturan CSS terdiri dari dua bagian utama:

selektor {
  properti: nilai;
  properti: nilai;
}

Contoh nyata:

p {
  color: red;
  font-size: 16px;
  line-height: 1.6;
}

p — selektor: memilih semua elemen <p> di halaman
color: red — deklarasi: properti color diberi nilai red
Setiap deklarasi diakhiri dengan titik koma ;
Semua deklarasi dibungkus dalam kurung kurawal { }

CSS dan HTML Bekerja Bersama

CSS tidak bisa berdiri sendiri — ia selalu bekerja berpasangan dengan HTML. HTML menyediakan struktur dan konten, CSS mengatur bagaimana konten tersebut ditampilkan:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Halaman Pertamaku</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Selamat Datang</h1>
  <p>Ini adalah halaman web pertamaku.</p>
</body>
</html>

/* style.css */
h1 {
  color: #1d4ed8;
  font-family: Arial, sans-serif;
}

p {
  color: #374151;
  font-size: 18px;
}

Cascading — Apa Artinya?

Kata Cascading pada CSS berarti bertingkat — CSS memiliki sistem prioritas untuk menentukan gaya mana yang diterapkan ketika ada konflik:

Browser default — gaya bawaan browser
External CSS — file .css terpisah
Internal CSS — di dalam tag <style>
Inline CSS — langsung di atribut style elemen
!important — prioritas tertinggi (gunakan dengan hemat)

Yang datang belakangan atau lebih spesifik akan menang:

p { color: blue; }   /* kalah */
p { color: red; }    /* menang — ditulis belakangan */

💡 Tips: CSS bukan bahasa pemrograman — tidak ada logika atau kondisi seperti di JavaScript. CSS adalah bahasa deklaratif: kamu hanya perlu menyatakan apa yang kamu inginkan, dan browser yang mengerjakannya. Ini membuatnya relatif mudah dipelajari di awal.

Pengenalan CSS