CSS Dasar sampai Responsive: Box Model, Flexbox, Grid

CSS • 2026-01-12

Belajar CSS dari dasar: selector, box model, flexbox, grid, sampai teknik responsive agar tampilan rapi di mobile.

CSS mengubah HTML yang “polos” menjadi tampilan yang nyaman dibaca. Kuncinya: pahami selector, box model, lalu kuasai Flexbox/Grid untuk layout.

Dasar CSS: cara pakai + selector

3 cara umum menambahkan CSS:

• External: <link rel="stylesheet" href="css/styles.css"> (paling disarankan).
• Internal: <style>...</style> (untuk contoh kecil).
• Inline: style="..." (hindari untuk project serius).

Contoh selector dasar:

/* selector elemen */
h1 { font-size: 2rem; }

/* class */
.card { border-radius: 12px; }

/* id */
#contact { padding: 60px 0; }

/* kombinasi */
.nav a { text-decoration: none; }

Box Model dan spacing

Box model = content + padding + border + margin. Banyak layout berantakan karena salah hitung box model.

/* tips wajib */
* { box-sizing: border-box; }

Atur spacing konsisten (misal kelipatan 8px): 8, 16, 24, 32.

Layout modern: Flexbox & Grid

Flexbox cocok untuk baris/kolom 1 dimensi (menu, card row). Grid cocok untuk layout 2 dimensi (dashboard, galeri).

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

.card {
  flex: 1 1 280px; /* grow shrink basis */
}

.grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

Responsive design (mobile first)

Mobile-first: mulai dari layar kecil, lalu tambah aturan untuk layar lebih besar.

.container { padding: 16px; }

@media (min-width: 768px) {
  .container { padding: 32px; }
}

Praktik terbaik CSS di project nyata

• Gunakan variabel CSS untuk warna/spacing: :root { --gap: 16px; }
• Hindari terlalu banyak !important (biasanya tanda struktur CSS kurang rapi).
• Minimalkan file CSS untuk produksi (opsional).
• Optimasi gambar & font untuk performa (lihat artikel Core Web Vitals).

Contoh layout sederhana

Contoh CSS untuk section hero sederhana:

#hero {
  padding: 72px 0;
}

#hero h1 {
  line-height: 1.2;
  margin-bottom: 12px;
}

#hero .cta {
  display: inline-block;
  padding: 12px 18px;
  border-radius: 12px;
}

Langkah berikutnya

Kalau tampilan sudah oke, lanjut belajar JavaScript untuk interaksi. Untuk performa, cek Optimasi Core Web Vitals.