CSS Cheatsheet

/* ── Selectors ─────────────────────── */
.class  #id  tag  *
div p          /* descendant */
div > p        /* direct child */
a:hover  input:focus  li:first-child  li:nth-child(2n)
[type="text"]  .a.b   /* both classes */
:not(.done)    :is(h1, h2, h3)

/* specificity: inline > id > class > tag */

/* ── Box model ─────────────────────── */
* { box-sizing: border-box; }   /* always */
.box {
  margin: 1rem;                 /* outside */
  border: 1px solid #ccc;
  padding: 1rem;                /* inside */
  width: 100%; max-width: 60ch;
}

/* ── Units ─────────────────────────── */
/* rem: root font size (use for most things)
   em: parent font size | %: of parent
   vw/vh: viewport | ch: character width */

/* ── Custom properties ─────────────── */
:root { --accent: #6366f1; }
.btn { color: var(--accent); }

/* ── Flexbox (1-D layout) ──────────── */
.row {
  display: flex;
  justify-content: space-between; /* main axis */
  align-items: center;            /* cross axis */
  gap: 1rem;
  flex-wrap: wrap;
}
.grow { flex: 1; }

/* ── Grid (2-D layout) ─────────────── */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}
.span2 { grid-column: span 2; }

/* ── Position ──────────────────────── */
.rel { position: relative; }
.abs { position: absolute; top: 0; right: 0; }
.fixed { position: fixed; inset: 0; }
.sticky { position: sticky; top: 0; }

/* ── Responsive ────────────────────── */
@media (max-width: 768px) {
  .row { flex-direction: column; }
}

/* ── Transitions & transforms ──────── */
.card {
  transition: transform 0.2s ease, box-shadow 0.2s;
}
.card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.15);
}
@keyframes spin { to { transform: rotate(360deg); } }
.loader { animation: spin 1s linear infinite; }