CSS custom properties (variables)

A CSS function used to insert the value of a custom property (variable) into other CSS declarations.

Part of: HTML and CSS Journey — Module 61

What it does: The :root pseudo-class corresponds to the html element and serves as the highest-level global scope. A comma inside the var() function separates the variable name from its default fallback value. CSS custom properties must start with a double dash (--). The dollar sign ($) is used in preprocessors like Sass. Unlike most CSS identifiers, custom property names are case-sensitive. Custom properties follow the cascade and can be redefined inside hover selectors, media queries, or specific classes. Declaring a variable requires starting with two dashes inside a valid CSS selector rule. The var() function retrieves and inserts the value of a declared custom property.

Common mistakes: Line 1 is incorrect because CSS custom properties must begin with a double dash prefix (--), not a single dash. Line 2 is incorrect because when referencing a custom property, the name inside var() must include the double dash prefix (--text-color).

Class: _____________________ · Name: _____________________ · Date: _________

Free printable worksheet with full answer key — or add this module to a journey and assign it to your class.

🖨 Print Worksheet and Answer key of CSS custom properties (variables) (PDF)

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning

Duo

Where do you typically declare global CSS custom properties so they are accessible throughout the entire document?

:rootbody

Matches

body { --main padding: 20px; }

↓

Invalid because custom property names cannot contain spaces.

Applying

Meanings

Term

var()

Meaning

A CSS function used to insert the value of a custom property (variable) into other CSS declarations.

Practice

:root {

Testing

Gaps

: blue;

Check Answer

Spots

1.item {

2 -theme-color: red;

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy

Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games

Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print

Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Teach this with your class →

Quick Questions

1. Where do you typically declare global CSS custom properties so they are accessible throughout the entire document?

A. :root ✓

B. body

Declaring custom properties in the :root pseudo-class makes them globally accessible from any element.

2. Which prefix must all CSS custom property names begin with?

A. -- ✓

B. $

CSS custom properties must start with a double dash (--). The dollar sign ($) is used in preprocessors like Sass.

3. Is the function syntax var(--color, blue) a valid way to provide a fallback value if --color is not defined?

A. Yes, separated by a comma ✓

B. No, var() only accepts one argument

The var() function allows a second argument separated by a comma to serve as a fallback or default value.

4. Are CSS custom property names case-sensitive (meaning --main-color and --Main-Color are different)?

A. Yes, they are case-sensitive ✓

B. No, CSS is always case-insensitive

Unlike most CSS identifiers, custom property names are case-sensitive.

5. Can you change the value of a CSS custom property dynamically inside a media query or a hover state?

A. Yes ✓

B. No

Custom properties follow the cascade and can be redefined inside hover selectors, media queries, or specific classes.

Match the Pairs

--primary-color: #ff0000; → Declares a CSS custom property named --primary-color with a red color value.

font-size: var(--text-lg); → Applies the value stored in the --text-lg custom property to the font-size property.

Declares a global custom property that can be used anywhere in the CSS file. → :root { --main-font: sans-serif; }

Uses a custom property with a fallback value of 10px if the variable is not defined. → margin: var(--spacing, 10px);

body { --main padding: 20px; } → Invalid because custom property names cannot contain spaces.

h1 { color: --theme-color; } → Invalid because the custom property name must be wrapped inside a var() function.

Key Term

var()

A CSS function used to insert the value of a custom property (variable) into other CSS declarations.

Fill in the Blanks

1. :root { --main-color: blue; }

Hint: Type the custom property name with the double dash prefix

2. body { color: var(--text-color); }

Hint: Type the CSS function name used to read a variable value

3. :root { --gap-size: 10px; }

Hint: Type the global pseudo-class selector used for global variables

4. h1 { margin: var(--space, 20px); }

Hint: Type the property name argument before the fallback comma

5. div { padding: var(--box-padding); }

Hint: Type the complete custom property name inside the function

Spot the Error

Question 1

A .item {

B -theme-color: red;

C }

Line B — Line 1 is incorrect because CSS custom properties must begin with a double dash prefix (--), not a single dash.

Question 2

A body {

B background-color: #fff;

C color: var(text-color);

D }

Line C — Line 2 is incorrect because when referencing a custom property, the name inside var() must include the double dash prefix (--text-color).

Question 3

A var(--main-size): 16px; {

B font-size: 16px;

C }

Line A — Line 0 is incorrect because custom properties must be declared as property-value pairs inside a normal CSS ruleset selector.

Question 4

A :root {

B --main-padding: 15px;

C }

D div { padding: --main-padding; }

Line D — Line 3 is incorrect because a custom property value must be retrieved by wrapping its name in the var() function syntax.

Question 5

A p {

B font-size: var(14px);

C color: black;

D }

Line B — Line 1 is incorrect because the var() function is meant for retrieving custom property names, not for wrapping raw static CSS values.

For Teachers

Create a free class, add this module to a journey, and track who's stuck.

Create a free teacher account →

No credit card. No setup fee. Make a class and invite students in under three minutes.

For Students

Practice this topic interactively, track progress, and unlock badges.

Start Learning Free →

Have a class code?