Using 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 starts with two dashes, like --main-color.

beginner

How do you declare a CSS variable?

You declare a CSS variable inside a selector using the syntax: --variable-name: value;. For example, :root { --main-color: #3498db; } sets a variable named --main-color.

beginner

How do you use a CSS variable in your styles?

Use the var() function with the variable name. For example, color: var(--main-color); applies the value stored in --main-color.

beginner

Why use CSS variables instead of repeating values?

CSS variables make it easy to change a value in one place and have it update everywhere. This saves time and keeps your styles consistent.

beginner

Where is the best place to declare global CSS variables?

Declare global CSS variables inside the :root selector. This makes them available everywhere in your CSS.

How do you declare a CSS variable named --bg-color with the value #fff?

A background-color: --bg-color #fff;

B :root { --bg-color: #fff; }

C var(--bg-color) = #fff;

D body { bg-color = #fff; }

CSS variables are declared inside selectors with two dashes and a colon, like --bg-color: #fff;.

How do you use a CSS variable named --text-color to set text color?

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

B color: --text-color;

C var(text-color);

D text-color: var(--text-color);

Use the var() function with the variable name to apply its value.

What is the advantage of using CSS variables?

A They are required for all CSS.

B They make CSS run faster.

C They replace HTML tags.

D They let you reuse values and update them easily.

CSS variables help keep your styles consistent and easy to update.

Where should you declare CSS variables to make them available everywhere?

A :root selector

B Inside each HTML tag

C Only inside <style> tags

D Inside JavaScript files

Declaring variables in :root makes them global in your CSS.

Which of these is a correct CSS variable name?

A main-font

B $main-font

C --main-font

D var-main-font

CSS variable names must start with two dashes, like --main-font.

Explain how to create and use a CSS variable to set a background color.

Think about how you store a color once and reuse it.

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

Imagine changing one color everywhere by changing just one place.