CSS Academy · Lesson

Declaring and Using Custom Properties

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

Declaring and Using Custom Properties is a free CSS Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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;
}

Using var() Function

Reference a custom property with the var() function:

button {
  background: var(--primary-color);
  padding: var(--spacing-md);
  border-radius: var(--border-radius);
  font-family: var(--font-body);
}

Custom Properties are Inherited

Custom properties follow normal CSS inheritance. A property defined on a parent is available to all its descendants unless overridden.

.card {
  --card-bg: white;
}

.card__body {
  background: var(--card-bg); /* inherits from .card */
}

Invalid Custom Property Values

Unlike regular CSS properties, an invalid custom property value does not cause the declaration to be ignored — the variable simply resolves to its value as-is. The consumer property then determines if it is valid.

Custom Properties vs Sass Variables

Key differences:

CSS custom properties are live in the browser — they update dynamically
Sass variables compile away at build time
Custom properties can be changed with JavaScript
Custom properties respect the cascade and inheritance

Naming Conventions

Name custom properties semantically, not by their visual value. This makes them easy to update later:

/* Bad */
--blue: #3b82f6;

/* Good */
--color-primary: #3b82f6;
--color-text: #111;
--size-spacing-sm: 8px;

Global vs Component Scope

Define global tokens in :root and component-specific values on the component's root class:

:root {
  --font-size-base: 1rem;
}

.card {
  --card-padding: 24px;
  --card-radius: 12px;
}

Custom Properties in calc()

Custom properties work inside calc() — they must include units if used in dimension calculations:

:root { --nav-height: 64px; }

.main-content {
  min-height: calc(100dvh - var(--nav-height));
}

Responsive Custom Properties

Change custom property values inside media queries for responsive token systems:

:root {
  --section-padding: 2rem;
}

@media (min-width: 1024px) {
  :root {
    --section-padding: 6rem;
  }
}

Custom Properties for Animation

Animate elements by changing a custom property (often via JavaScript) rather than multiple individual properties:

.progress {
  --progress: 0%;
  width: var(--progress);
  transition: width 300ms ease;
}

Quick Check

How do you declare a global CSS custom property named --accent?

Recap

CSS custom properties are declared with --name: value and consumed with var(--name). Declare global tokens on :root; scope component values to component selectors. They are live, cascade-aware, and changeable by JavaScript — making them far more powerful than Sass variables.

Frequently asked questions

Is the “Declaring and Using Custom Properties” lesson free?

Yes — the full text of “Declaring and Using Custom Properties” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.

What will I learn in “Declaring and Using Custom Properties”?

Define CSS custom properties with -- prefix and consume them with the var() function. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start CSS Academy?

No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Declaring and Using Custom Properties” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this CSS Academy lesson?

Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to CSS Academy