Bird
Raised Fist0
CSSmarkup~5 mins

Using variables in CSS

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

Variables in CSS 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 on your website.
When you need to keep font sizes consistent across different sections.
When you want to quickly update a style like a background color without searching all your CSS.
When you want to create themes that can change colors or fonts easily.
When you want to avoid repeating the same value multiple times in your CSS.
Syntax
CSS
:root {
  --variable-name: value;
}

selector {
  property: var(--variable-name);
}

Variables start with two dashes -- and are usually defined inside :root for global use.

Use var(--variable-name) to apply the variable value.

Examples
This sets a blue color variable and uses it as the background color for the whole page.
CSS
:root {
  --main-color: #3498db;
}

body {
  background-color: var(--main-color);
}
Defines a padding size variable and applies it to a container element.
CSS
:root {
  --padding-size: 1.5rem;
}

.container {
  padding: var(--padding-size);
}
Stores a font family in a variable and uses it for all h1 headings.
CSS
:root {
  --font-stack: 'Arial', sans-serif;
}

h1 {
  font-family: var(--font-stack);
}
Sample Program

This example shows how to define variables for colors and padding, then use them in the page styles. Changing the variable values in :root updates the whole page easily.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>CSS Variables Example</title>
  <style>
    :root {
      --primary-color: #2ecc71;
      --text-color: #333333;
      --padding: 1rem;
    }

    body {
      background-color: var(--primary-color);
      color: var(--text-color);
      font-family: Arial, sans-serif;
      padding: var(--padding);
      margin: 0;
    }

    h1 {
      font-size: 2rem;
      margin-bottom: var(--padding);
    }

    p {
      font-size: 1rem;
      line-height: 1.5;
    }
  </style>
</head>
<body>
  <h1>Welcome to CSS Variables</h1>
  <p>This page uses variables to keep colors and spacing consistent.</p>
</body>
</html>
OutputSuccess
Important Notes

Variables are case-sensitive, so --Main-Color and --main-color are different.

If a variable is not defined, the browser ignores it and uses the default or nothing.

You can override variables inside specific selectors to create themes or variations.

Summary

CSS variables store reusable values like colors and sizes.

Define variables inside :root for global use.

Use var(--variable-name) to apply the variable value in styles.

Practice

(1/5)
1. What is the main purpose of CSS variables?
easy
A. To store reusable values like colors and sizes
B. To create new HTML elements
C. To write JavaScript code inside CSS
D. To add comments in CSS files

Solution

  1. Step 1: Understand what CSS variables do

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

  2. Step 2: Compare options with this purpose

    Only To store reusable values like colors and sizes describes storing reusable values; others describe unrelated tasks.

  3. Final Answer:

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

  4. Quick Check:

    CSS variables = reusable values [OK]
Hint: CSS variables store values you reuse often [OK]
Common Mistakes:
  • Thinking CSS variables create HTML elements
  • Confusing CSS variables with JavaScript
  • Believing CSS variables add comments
2. Which is the correct way to define a CSS variable for a primary color globally?
easy
A. :root { --primary-color: #3498db; }
B. body { primary-color: #3498db; }
C. :root { primary-color = #3498db; }
D. html { --primary-color #3498db; }

Solution

  1. Step 1: Recall CSS variable syntax

    Variables are defined with two dashes and a colon inside a selector, usually :root for global scope.

  2. Step 2: Check each option's syntax

    :root { --primary-color: #3498db; } uses correct syntax: :root { --name: value; }. Others have missing dashes, wrong selectors, or wrong assignment.

  3. Final Answer:

    :root { --primary-color: #3498db; } -> Option A

  4. Quick Check:

    Define variables with --name: value; inside :root [OK]
Hint: Use :root and --var-name: value; to define variables [OK]
Common Mistakes:
  • Missing double dashes before variable name
  • Using = instead of : for assignment
  • Defining variables outside :root for global use
3. Given the CSS below, what color will the paragraph text be?
:root { --main-color: #ff0000; } p { color: var(--main-color); }
medium
A. Blue
B. Green
C. Black
D. Red

Solution

  1. Step 1: Identify the variable value

    The variable --main-color is set to #ff0000, which is red.

  2. Step 2: Check how the variable is used

    The paragraph's color is set using var(--main-color), so it uses the red color.

  3. Final Answer:

    Red -> Option D

  4. Quick Check:

    var(--main-color) = #ff0000 (red) [OK]
Hint: Match variable value hex to color name [OK]
Common Mistakes:
  • Ignoring the variable and using default color
  • Confusing hex codes with other colors
  • Not using var() to apply variable
4. What is wrong with this CSS code?
:root { --font-size 16px; } h1 { font-size: var(--font-size); }
medium
A. Variable name should not start with dashes
B. Missing colon after --font-size in variable definition
C. Using var() incorrectly in h1 font-size
D. font-size property cannot use variables

Solution

  1. Step 1: Check variable definition syntax

    The variable definition is missing a colon after --font-size; it should be --font-size: 16px;

  2. Step 2: Verify usage of var()

    The usage var(--font-size) is correct in h1 font-size property.

  3. Final Answer:

    Missing colon after --font-size in variable definition -> Option B

  4. Quick Check:

    Variable definitions need colon after name [OK]
Hint: Variable definitions need colon after name [OK]
Common Mistakes:
  • Forgetting colon in variable definition
  • Thinking var() usage is wrong
  • Believing variable names can't start with --
5. You want to create a theme with two colors using CSS variables: primary as blue (#0000ff) and secondary as gray (#888888). How do you apply these variables to style a button's background and border color?
hard
A. :root { --primary: blue; --secondary: gray; } button { background-color: --primary; border: 2px solid --secondary; }
B. :root { primary: #0000ff; secondary: #888888; } button { background-color: primary; border: 2px solid secondary; }
C. :root { --primary: #0000ff; --secondary: #888888; } button { background-color: var(--primary); border: 2px solid var(--secondary); }
D. button { --primary: #0000ff; --secondary: #888888; background-color: var(primary); border: 2px solid var(secondary); }

Solution

  1. Step 1: Define variables globally with correct syntax

    Variables must be defined inside :root with double dashes and colon, e.g., --primary: #0000ff;

  2. Step 2: Use variables with var() in button styles

    Apply variables using var(--primary) for background and var(--secondary) for border color.

  3. Final Answer:

    :root { --primary: #0000ff; --secondary: #888888; } button { background-color: var(--primary); border: 2px solid var(--secondary); } -> Option C

  4. Quick Check:

    Define with --name: value; use with var(--name) [OK]
Hint: Define variables in :root and use var(--name) to apply [OK]
Common Mistakes:
  • Omitting -- in variable names
  • Not using var() when applying variables
  • Defining variables inside button instead of :root