Declaring variables in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a CSS variable?

A CSS variable is a custom property that stores a value you can reuse throughout your CSS. It helps keep styles consistent and easy to update.

beginner

How do you declare a CSS variable?

You declare a CSS variable inside a selector using two dashes before the name, like --main-color: blue;. Usually, variables are declared inside the :root selector for global use.

beginner

How do you use a CSS variable in your styles?

Use the var() function with the variable name, like color: var(--main-color);. This applies the stored value wherever you use it.

beginner

Why use CSS variables instead of repeating values?

CSS variables make it easy to update styles in one place. For example, changing --main-color updates all uses of that color, saving time and reducing mistakes.

intermediate

Can CSS variables have fallback values?

Yes! You can provide a fallback value inside var(), like color: var(--unknown-color, black);. If the variable is not defined, the fallback is used.

How do you declare a CSS variable named --font-size with value 16px globally?

A --font-size: 16px;

B body { font-size: --font-size: 16px; }

C :root { --font-size: 16px; }

D var(--font-size) = 16px;

CSS variables are declared inside selectors with two dashes. The :root selector is used for global scope.

Which syntax correctly uses a CSS variable named --main-color for text color?

A color: var(--main-color);

B color: --main-color;

C color: $main-color;

D color: main-color;

Use the var() function to access CSS variables.

What happens if you use color: var(--unknown-color, red); but --unknown-color is not defined?

A The browser shows an error.

B The color will be red.

C The color will be transparent.

D The color will be black.

The fallback value red is used if the variable is not defined.

Why is it good to declare CSS variables inside :root?

A It disables variables.

B It hides variables from the browser.

C It makes variables only work on the body.

D It makes variables available globally.

:root is the highest-level selector, so variables declared there can be used anywhere.

Which of these is NOT a benefit of using CSS variables?

A Variables automatically change HTML content.

B Easier to update repeated values.

C Variables can store any CSS value.

D Variables help keep styles consistent.

CSS variables only affect styles, not HTML content.

Explain how to declare and use a CSS variable for a background color.

Think about where to put the variable and how to apply it in CSS.

Describe the benefits of using CSS variables in a website's style.

Consider how variables save time and reduce errors.