Why CSS variables are used - Quick Recap

Recall & Review

beginner

What are CSS variables?

CSS variables are custom properties that store values you can reuse throughout your CSS. They start with two dashes, like --main-color.

beginner

How do CSS variables help with consistency?

By using CSS variables, you can define a value once and use it many times. This keeps colors, fonts, and sizes consistent across your website.

beginner

How do CSS variables make updating styles easier?

If you want to change a color or size, you only update the variable value once. All places using that variable update automatically.

intermediate

Can CSS variables be changed with JavaScript?

Yes! You can change CSS variables dynamically using JavaScript, which helps create interactive and responsive designs.

beginner

What is the syntax to use a CSS variable inside a style?

Use the var() function. For example, color: var(--main-color); applies the value of --main-color.

What is the main benefit of using CSS variables?

A They automatically fix broken CSS.

B They make CSS run faster in browsers.

C They replace HTML tags.

D They allow reusing values easily across styles.

CSS variables let you store values once and reuse them, making your styles consistent and easier to update.

How do you define a CSS variable?

A Using <code>variable-name: value;</code> in HTML.

B Using <code>$variable-name: value;</code> in CSS.

C Using <code>--variable-name: value;</code> inside a selector.

D Using <code>var(variable-name) = value;</code>.

CSS variables are defined with two dashes before the name inside a CSS selector, like --main-color: blue;.

Which function is used to access a CSS variable's value?

A getVar()

B var()

C useVar()

D fetchVar()

The var() function is used to get the value of a CSS variable, for example color: var(--main-color);.

Can CSS variables be changed after the page loads?

A Yes, with JavaScript.

B No, they are fixed.

C Only in Internet Explorer.

D Only by refreshing the page.

JavaScript can update CSS variables dynamically, allowing interactive style changes without reloading.

Why are CSS variables better than repeating the same value everywhere?

A They reduce errors and make updates easier.

B They make the page load slower.

C They only work in Chrome.

D They require special plugins.

Using variables avoids mistakes from typing values many times and lets you update styles quickly by changing one place.

Explain why CSS variables improve website style management.

Think about how changing one value can update many places.

Describe how CSS variables can be used with JavaScript.

Consider how websites change colors or themes on user actions.

Practice

1. Why are CSS variables used in web design?

easy

A. To create animations without JavaScript

B. To add images to a webpage

C. To write HTML code faster

D. To store reusable values like colors and sizes

Solution

1. Step 1: Understand the purpose of CSS variables

   CSS variables hold values such as colors or sizes that can be reused throughout the stylesheet.

2. Step 2: Compare options to the purpose

   Only To store reusable values like colors and sizes correctly describes storing reusable values. Other options describe unrelated tasks.

3. Final Answer:

   To store reusable values like colors and sizes -> Option D

4. Quick Check:

   CSS variables = reusable values [OK]

Hint: CSS variables store values to reuse easily [OK]

Common Mistakes:

• Thinking CSS variables create animations
• Confusing CSS variables with HTML features
• Believing CSS variables add images

2. Which of the following is the correct syntax to declare a CSS variable named --main-color with the value #3498db?

easy

A. body { main-color = #3498db; }

B. :root { --main-color: #3498db; }

C. :root { main-color: #3498db; }

D. body { --main-color = #3498db; }

Solution

1. Step 1: Identify correct CSS variable declaration syntax

   CSS variables are declared with two dashes before the name and a colon to assign the value inside a selector like :root.

2. Step 2: Check each option for syntax correctness

   :root { --main-color: #3498db; } uses :root { --main-color: #3498db; } which is correct. Others use wrong selectors or assignment operators.

3. Final Answer:

   :root { --main-color: #3498db; } -> Option B

4. Quick Check:

   CSS variable syntax = colon and double dash [OK]

Hint: CSS variables start with -- and use colon : [OK]

Common Mistakes:

• Using = instead of : to assign values
• Omitting the double dashes -- before variable name
• Declaring variables outside a selector block

3. What will be the background color of the <div> in this CSS?

:root { --bg-color: lightgreen; } div { background-color: var(--bg-color); }

medium

A. lightgreen

B. white

C. transparent

D. black

Solution

1. Step 1: Understand variable declaration and usage

   The variable --bg-color is set to lightgreen in :root, making it global.

2. Step 2: Check how variable is used in div

   The div uses background-color: var(--bg-color); which applies the variable's value.

3. Final Answer:

   lightgreen -> Option A

4. Quick Check:

   var(--bg-color) = lightgreen [OK]

Hint: var(--name) uses the variable's value [OK]

Common Mistakes:

• Forgetting to use var() to access variables
• Assuming default color if variable is set
• Confusing variable name syntax

4. Identify the error in this CSS code using variables:

:root { --text-color: blue } p { color: var(text-color); }

medium

A. Missing semicolon after variable declaration

B. Variables cannot be used inside p selector

C. Incorrect variable name usage inside var() function

D. Variable names cannot have dashes

Solution

1. Step 1: Check variable declaration syntax

   The variable --text-color is declared correctly except missing semicolon, but CSS allows last property without semicolon.

2. Step 2: Check variable usage syntax

   Inside var(), the variable name must include the double dashes --. Here it is missing.

3. Final Answer:

   Incorrect variable name usage inside var() function -> Option C

4. Quick Check:

   var() needs -- before variable name [OK]

Hint: Use var(--variable-name), include the dashes [OK]

Common Mistakes:

• Omitting -- inside var()
• Thinking semicolon is always required last
• Believing variables can't be used in selectors

5. You want to create a website theme with a main color that can be changed easily. Which approach using CSS variables is best?

hard

A. Declare --main-color in :root and use var(--main-color) everywhere

B. Write the color value directly in every CSS rule

C. Use JavaScript to change colors without CSS variables

D. Create separate CSS files for each color and switch files

Solution

1. Step 1: Understand the goal of easy theme color changes

   Using CSS variables declared in :root allows changing one value to update all uses.

2. Step 2: Evaluate each option for maintainability

   Declare --main-color in :root and use var(--main-color) everywhere uses variables globally, making updates simple. Options B, C, and D are less efficient or more complex.

3. Final Answer:

   Declare --main-color in :root and use var(--main-color) everywhere -> Option A

4. Quick Check:

   Global CSS variables simplify theme changes [OK]

Hint: Use :root variables for easy global changes [OK]

Common Mistakes:

• Hardcoding colors everywhere
• Relying only on JavaScript for styling
• Managing multiple CSS files unnecessarily