Pengenalan CSS dan Cara Pakai

CSS itu apa sih?

Kalau HTML adalah kerangka rumah (dinding, pintu, jendela), CSS adalah cat, keramik, dan dekorasinya. CSS singkatan dari Cascading Style Sheets: bahasa khusus buat mengatur tampilan elemen HTML, mulai dari warna teks, ukuran font, sampai posisi elemen di layar.

Satu aturan CSS selalu punya pola yang sama:

selektor {
  properti: nilai;
}

Selektor menentukan elemen mana yang kena aturan. Properti menentukan aspek apa yang diubah. Nilai menentukan hasil akhirnya. Contoh nyata:

h1 {
  color: crimson;
  font-size: 32px;
}

Kode di atas bilang: semua elemen h1 teksnya merah keunguan dan ukurannya 32 piksel. Sesederhana itu.

Tiga cara menempelkan CSS

Ada tiga cara memakai CSS di halaman, dari yang paling cepat sampai yang paling rapi.

1. Inline: ditulis langsung di atribut elemen.

<p style="color: blue;">Teks biru ini</p>

Cepat buat coba-coba, tapi berantakan kalau dipakai banyak. Hindari untuk project serius.

2. Internal: ditulis di dalam tag <style> di bagian <head>.

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

Cocok buat latihan satu halaman.

3. Eksternal: ditulis di file terpisah (misal style.css), lalu dihubungkan ke HTML.

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

Ini cara profesional. Satu file CSS bisa dipakai banyak halaman, jadi perubahan tema cukup sekali di satu tempat.

Komentar di CSS

Tulis catatan dengan /* ... */. Isinya diabaikan browser, berguna buat menjelaskan bagian kode ke dirimu di masa depan.

/* Judul utama halaman */
h1 {
  color: crimson;
}

Catatan teknis: browser membaca CSS dari atas ke bawah. Kalau dua aturan menyasar elemen yang sama dengan kekuatan yang setara, aturan yang ditulis paling bawah yang menang. Ini konsep dasar dari kata "cascading".

Rangkuman

CSS mengatur tampilan HTML lewat aturan selektor + properti + nilai. Cara pakai yang benar untuk project nyata adalah file eksternal yang dihubungkan pakai <link>. Mulai sekarang semua latihan di track ini akan memakai cara eksternal.