HTML & CSS · Quick Reference

Lesson 11 — CSS Variables & Theming Cheat Sheet

HTML & CSS

In one line: Custom properties start with -- (two dashes) and are used with the var() function. They're case-sensitive and can hold any valid CSS value — colors, sizes, durations, even parti...

Key Ideas

1Defining & Using Custom Properties. Custom properties start with -- (two dashes) and are used with the var() function. They're case-sensitive and can hold any valid CSS value — colors, sizes, durations, ...

2Scope: :root vs Element Scope. CSS variables cascade and inherit just like regular CSS. When you declare a variable on an element, it's only available to that element and its descendants — this is t...

3Fallback Values & JavaScript Integration. The var() function accepts an optional fallback value — used if the variable isn't defined. And since CSS variables live in the DOM's computed style, JavaScript can re...

4Dark / Light Mode Toggle. CSS variables make theme switching trivial. Define your entire color palette as variables on :root, then override those same variables under a [data-theme="light"] att...

5Dynamic Theming Patterns. CSS variables unlock design patterns that were previously impossible without JavaScript frameworks. Here are the most useful ones for real projects.

Code Examples

/* Declare on :root — globally available */
:root {
  --color-primary: #2de8c0;
  --color-bg: #05091a;
  --color-text: #eef3ff;
  --font-size-base: 1rem;
  --spacing-md: 1.5rem;
  --radius: 12px;
  --transition: 0.2s ease;
}

/* Use with var() */...

:root {
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-4: 1rem;      /* 16px */
  --space-8: 2rem;      /* 32px */
}

.card {
  padding: var(--space-4);
  gap: var(--space-2);
  /* calc() works great with variables *...

/* Global — available everywhere */
:root {
  --accent: #2de8c0;
  --bg: #05091a;
}

/* Scoped — override just for this component */
.card--danger {
  --accent: #f87171;    /* only inside .card--danger */
  --bg: rgba(248,113,113,.08);
}

.card-...