cheat-sheetreferensiringkasanMahir4 mnt baca

Cheat Sheet CSS Lengkap

Ringkasan kilat seluruh track: selektor, box model, flexbox, grid, dan properti penting dalam satu referensi cepat.

Cara pakai cheat sheet ini

Halaman ini bukan buat dibaca berurutan, tapi buat ditemukan cepat saat kamu lupa sintaks. Setiap bagian merangkum satu modul dalam pola paling umum dipakai.

Selektor

css

p { }              /* elemen */
.teks { }          /* class */
#unik { }          /* id */
nav a { }          /* keturunan */
ul > li { }        /* anak langsung */
h2 + p { }         /* saudara tepat setelah */
input[type="text"] { } /* atribut */
a:hover { }        /* pseudo-class */
.kartu::before { } /* pseudo-element */

Box model dan spacing

css

* { box-sizing: border-box; }

.kotak {
  width: 300px;
  padding: 16px;              /* dalam */
  border: 2px solid #333;     /* bingkai */
  border-radius: 12px;
  margin: 0 auto;             /* luar + centering */
}

Tipografi

css

body {
  font-family: "Inter", sans-serif;
  font-size: 1rem;
  line-height: 1.6; /* tanpa satuan */
  color: #1e293b;
}

.potong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Positioning

css

.jangkar { position: relative; }

.badge {
  position: absolute;
  top: 8px;
  right: 8px;
}

.navbar { position: sticky; top: 0; z-index: 50; }
.melayang { position: fixed; bottom: 24px; right: 24px; }

Flexbox

css

.wadah {
  display: flex;
  flex-direction: row; /* row | column */
  justify-content: center; /* main axis */
  align-items: center;     /* cross axis */
  gap: 16px;
  flex-wrap: wrap;
}

.item { flex: 1; }           /* bagi rata */
.item-khusus { align-self: flex-start; }

Grid

css

.wadah {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 16px;
}

.galeri {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.dashboard {
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

Responsif

css

/* mobile first */
.daftar { grid-template-columns: 1fr; }

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

@media (min-width: 1024px) {
  .daftar { grid-template-columns: repeat(4, 1fr); }
}

Animasi

css

.tombol {
  transition: transform 0.25s ease-out, background 0.25s;
}
.tombol:hover { transform: translateY(-2px); }

@keyframes putar {
  to { transform: rotate(360deg); }
}
.spinner { animation: putar 1s linear infinite; }

Variabel dan fungsi

css

:root {
  --primer: #8b5cf6;
  --h1: clamp(1.75rem, 1.2rem + 2.5vw, 3rem);
}

h1 {
  color: var(--primer);
  font-size: var(--h1);
  width: min(700px, 90%);
}

Urutan specificity (pengingat)

Skor (id, class, elemen). Id menang atas class sebanyak apa pun. !important hanya darurat. Kalau style tidak jalan, cek DevTools: yang dicoret = yang kalah.

Catatan teknis: cheat sheet ini sengaja tidak mencakup semua properti CSS (jumlahnya ratusan). Kalau butuh yang spesifik, MDN Web Docs adalah referensi paling akurat. Tujuan halaman ini adalah mengingat pola, bukan menghafal kamus.

Rangkuman

Satu halaman ini merangkum 35 modul sebelumnya. Bookmark dan buka saat ngoding: lebih cepat daripada googling sintaks yang sama untuk kesekian kalinya.