Bird
Raised Fist0
CSSmarkup~5 mins

Why CSS variables are used

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Introduction

CSS variables help you reuse colors, sizes, or other values easily. They make changing styles faster and keep your code neat.

When you want to use the same color in many places and might change it later.
When you want to keep font sizes consistent across your website.
When you want to create themes that can switch colors quickly.
When you want to avoid repeating the same values in your CSS.
When you want to make your CSS easier to read and update.
Syntax
CSS
:root {
  --main-color: #3498db;
}

.element {
  color: var(--main-color);
}
CSS variables start with two dashes, like --main-color.
Use var(--variable-name) to get the value of a variable.
Examples
This sets a button's background color using a CSS variable.
CSS
:root {
  --primary-color: #ff6347;
}

button {
  background-color: var(--primary-color);
}
This uses a variable for font size to keep text consistent.
CSS
:root {
  --font-size: 1.2rem;
}

p {
  font-size: var(--font-size);
}
This applies the same padding value to a container using a variable.
CSS
:root {
  --padding: 1rem;
}

.container {
  padding: var(--padding);
}
Sample Program

This example shows how CSS variables control background color, text color, and padding. Changing the variable values updates the whole page style easily.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>CSS Variables Example</title>
  <style>
    :root {
      --main-bg-color: #282c34;
      --main-text-color: #61dafb;
      --padding-size: 1.5rem;
    }

    body {
      background-color: var(--main-bg-color);
      color: var(--main-text-color);
      padding: var(--padding-size);
      font-family: Arial, sans-serif;
    }

    h1 {
      font-size: 2rem;
    }

    p {
      font-size: 1rem;
    }
  </style>
</head>
<body>
  <h1>Welcome to CSS Variables</h1>
  <p>Using variables makes styling easier and faster.</p>
</body>
</html>
OutputSuccess
Important Notes

CSS variables can be changed with JavaScript for dynamic styling.

Variables inside :root are global and can be used anywhere in your CSS.

Using variables reduces mistakes and saves time when updating styles.

Summary

CSS variables store reusable values like colors and sizes.

They make your CSS easier to maintain and update.

Using variables helps keep your website consistent and neat.

Practice

(1/5)
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