CSS pertamamu: warna, huruf, dan jarak

Sejauh ini halaman kita tampil dengan gaya bawaan peramban: latar putih, huruf bergaya lama, tautan biru. Sekarang saatnya menambah CSS supaya halaman lebih enak dibaca.

Menautkan berkas CSS

Buat berkas baru bernama gaya.css di folder yang sama dengan index.html. Lalu tambahkan satu baris ini di dalam <head>:

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

Aturan pertama

Sebuah aturan CSS terdiri atas selektor (elemen mana yang ditata) dan satu atau beberapa pasangan properti dan nilai di dalam kurung kurawal. Setiap pasangan diakhiri titik koma.

body {
  margin: 0;
  padding: 24px;
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  color: #1f2937;
  background-color: #ffffff;
}

h1 {
  font-size: 2rem;
  color: #3f4a8a;
}

a {
  color: #2f386b;
}

Simpan, lalu muat ulang halaman. Huruf berubah, jarak antarbaris lebih lega, dan judul berwarna. Properti yang dipasang di body seperti font-family dan color ikut diwariskan ke elemen di dalamnya, jadi kita tidak perlu mengulangnya untuk setiap paragraf.

Kelas untuk elemen tertentu

Selektor elemen seperti p mengenai semua paragraf. Kalau hanya ingin menata bagian tertentu, beri elemen itu atribut class di HTML, lalu pakai selektor kelas yang diawali titik.

<section class="kartu">
  <h2>Yang sedang saya pelajari</h2>
  <p>Minggu ini saya fokus pada dasar CSS.</p>
</section>

.kartu {
  padding: 16px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
}

padding adalah jarak di dalam garis tepi, margin jarak di luarnya. Keduanya paling sering tertukar oleh pemula; cara termudah mengingatnya adalah mencoba mengubah nilainya dan melihat mana yang bergeser.