0Pricing
CSS Academy · Lesson

Declaring and Using Custom Properties

Define CSS custom properties with -- prefix and consume them with the var() function.

What are CSS Custom Properties?

CSS custom properties (also called CSS variables) let you define a reusable value once and use it throughout your stylesheet. They follow the --name: value syntax.

Declaring Custom Properties

Declare custom properties on any element. Declaring on :root makes them globally available:

:root {
  --primary-color: #3b82f6;
  --spacing-md: 16px;
  --border-radius: 8px;
  --font-body: "Inter", sans-serif;
}

All lessons in this course

  1. Declaring and Using Custom Properties
  2. Fallback Values and var()
  3. Scoping Variables to Components
  4. Updating Variables with JavaScript
← Back to CSS Academy