Tanpa CSS, halaman web hanya teks hitam-putih membosankan. Dengan CSS kamu bisa mengatur warna, ukuran, posisi, jarak, dan animasi.

"Cascading" = aturan mengalir dari atas ke bawah; aturan yang lebih spesifik / terakhir menang.

🔑 Ingat: HTML = kerangka & isi, CSS = tampilan & gaya.

/* Mengatur semua paragraf */
p {
  color: gold;          /* warna teks   */
  font-size: 18px;      /* ukuran huruf */
  text-align: center;   /* rata tengah  */
}

• 🔹 p → selector (elemen yang dituju)
• 🔹 color → property (sifat yang diubah)
• 🔹 gold → value (nilainya)
• 🔹 Akhiri tiap baris dengan titik koma ( ; )

<p style="color:gold; font-size:20px;">
  Teks ini berwarna emas!
</p>

<h1 style="text-align:center;">Judul Tengah</h1>

✅ Kelebihan: cepat untuk uji coba 1 elemen.

❌ Kekurangan: berantakan & sulit dirawat bila dipakai banyak.

<head>
  <style>
    body { background: navy; }
    p    { color: gold; }
  </style>
</head>

✅ Kelebihan: rapi, satu halaman cukup satu tempat aturan.

❌ Kekurangan: tidak bisa dipakai ulang di halaman lain.

File 1 — index.html

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

File 2 — style.css

body { background: navy; }
h1   { color: gold; }

⭐ Paling direkomendasikan untuk website nyata.

Di toko cat, tiap warna punya kode khusus (mis. "RAL 1023"). Di CSS pun sama — komputer butuh kode pasti agar warnanya tepat.

color: red;                 /* nama   */
color: #FFD700;             /* HEX    */
color: rgb(255, 215, 0);    /* RGB    */
color: rgba(255,215,0,0.5); /* + alpha*/
color: hsl(51, 100%, 50%);  /* HSL    */

🔸 RGBA punya alpha (0–1) untuk transparansi.

background: rgba(10,14,26,1);

Dinding kamarmu bisa dicat polos, ditempel poster, atau diberi motif gradasi. Background CSS bekerja persis seperti itu.

background-color: navy;
background-image: url("foto.jpg");
background: linear-gradient(45deg,
            gold, cyan);
background-repeat: no-repeat;
background-position: center;

Setiap orang punya gaya tulisan tangan berbeda. Font = gaya tulisan yang dipilih komputer.

font-family: 'Poppins', sans-serif;
font-size: 24px;
font-weight: 700;   /* tebal */
font-style: italic; /* miring */

🌐 Google Fonts: tambahkan <link> Google Fonts di head, lalu pakai nama font-nya.

Tombol rata kiri/tengah, garis bawah, huruf KAPITAL — semua yang sudah kamu kenal di Word, ada juga di CSS.

text-align: center;
text-decoration: underline;
text-transform: uppercase;
letter-spacing: 3px;
text-shadow: 2px 2px 6px gold;

Bingkai foto bisa tipis, tebal, putus-putus, atau sudutnya membulat. border-radius mengubah persegi jadi lingkaran!

border-width: 4px;
border-style: dashed;  /* solid|dotted */
border-color: gold;
/* atau singkat: */
border: 4px solid gold;
border-radius: 16px;   /* 50% = bulat */

Margin itu seperti jarak antara mejamu dengan tembok — ruang di luar yang memisahkan elemen satu dengan lainnya.

margin: 20px;            /* semua sisi */
margin: 10px 20px;       /* atas-bwh | kiri-kanan */
margin-top: 30px;        /* satu sisi  */
margin: 0 auto;          /* tengah! ⭐ */

⭐ margin: 0 auto = trik klasik untuk memposisikan ke tengah.

🟧 Area oranye = margin. Geser slider, lihat ruang luar membesar!

Padding seperti empuknya bantal sofa — jarak antara kamu (isi) dengan sandaran (border). Membuat konten tidak mepet ke tepi.

padding: 20px;          /* semua sisi */
padding: 10px 30px;     /* atas-bwh | kiri-kanan */
padding-left: 40px;     /* satu sisi  */

🧮 Box Model: Content → Padding → Border → Margin (dari dalam ke luar).

🟩 Area hijau = padding. Semakin besar, isi makin "lega" dari tepi.

Ada baju ukuran tetap (px) seperti "S/M/L", dan ada yang menyesuaikan badan (%) seperti karet. CSS punya keduanya.

width: 300px;     /* tetap        */
width: 50%;       /* setengah induk*/
width: 100vw;     /* lebar layar   */
height: 100vh;    /* tinggi layar  */
max-width: 600px; /* batas maksimal*/

Geser slider — kotak berubah ukuran secara real-time!

.kartu {
  background: #101524;
  color: white;
  padding: 24px;
  border: 3px solid gold;
  border-radius: 16px;
  text-align: center;
  width: 70%;
  box-shadow: 0 0 20px gold;
}

✨ Lihat? Hanya dengan beberapa property, sebuah <div> polos berubah jadi kartu profil yang elegan.

Geser slider di kiri dan amati kode mana yang berubah!