Pengantar Dasar-Dasar CSS.

CSS (Cascading Style Sheets) adalah bahasa yang mengatur tampilan visual dokumen HTML: warna, ukuran, jarak, hingga tata letak keseluruhan halaman.

Cara Menghubungkan CSS ke HTML

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

Menautkan file CSS terpisah adalah praktik yang direkomendasikan dibanding menulis style inline, karena lebih mudah dikelola dan dipakai ulang di banyak halaman.

Selector Dasar

p { color: #333; }              /* selector tag */
.judul { font-size: 24px; }     /* selector class */
#header { background: #fff; }   /* selector id */

Box Model

Setiap elemen HTML diperlakukan sebagai kotak, terdiri dari content, padding, border, dan margin.

.kartu {
  padding: 16px;
  border: 1px solid #ddd;
  margin: 8px;
  box-sizing: border-box; /* padding & border dihitung di dalam width, bukan menambahnya */
}

box-sizing: border-box sangat umum dipakai di proyek modern agar perhitungan lebar elemen lebih mudah diprediksi.

Specificity: Aturan Mana yang Menang

Saat beberapa selector menargetkan elemen yang sama, CSS memilih aturan berdasarkan specificity — id lebih kuat dari class, class lebih kuat dari tag.

p { color: blue; }
.teks { color: green; }
#judulUtama { color: red; }

Jika ketiga selector menargetkan elemen yang sama, warna merah dari #judulUtama yang akan dipakai karena id punya specificity tertinggi.

Flexbox untuk Tata Letak Satu Dimensi

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

Flexbox cocok untuk mengatur elemen dalam satu baris atau satu kolom, seperti navigasi, kartu sejajar, atau tombol yang perlu rata tengah.

Grid untuk Tata Letak Dua Dimensi

.galeri {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

Grid unggul saat tata letak butuh baris dan kolom sekaligus, seperti galeri foto atau dashboard dengan banyak panel.

Responsive Design dengan Media Query

.galeri {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 640px) {
  .galeri {
    grid-template-columns: 1fr;
  }
}

Kesimpulan

Memahami box model dan specificity adalah dasar untuk menghindari kebingungan “kenapa style ini tidak berlaku”, sementara Flexbox dan Grid adalah dua alat tata letak utama di CSS modern yang saling melengkapi — Flexbox untuk susunan satu arah, Grid untuk susunan dua dimensi yang lebih kompleks.