CSS Modern: Animasi & Layout Procss
0/7
Langkah 1 dari 7

CSS Custom Properties (Variables)

Langkah 1: CSS Variables

CSS Custom Properties memungkinkan tema yang konsisten:

:root {
  --color-primary: #7c3aed;
  --color-text: #1f2937;
  --color-bg: #f9fafb;
  --spacing-md: 1rem;
  --border-radius: 8px;
  --font-sans: 'Plus Jakarta Sans', sans-serif;
}

/* Gunakan dengan var() */
.button {
  background: var(--color-primary);
  padding: var(--spacing-md);
  border-radius: var(--border-radius);
}

/* Override untuk komponen tertentu */
.card {
  --color-primary: #059669;  /* Lokal override */
  background: var(--color-primary);
}

Tugasmu: Buat sistem design token dengan minimal 5 variabel CSS di :root, lalu terapkan ke beberapa elemen.

style.css
CSS
1
CSSLn 1, Col 0UTF-8

Tab = 4 spasi  •  Ctrl+Enter = Cek