Bird
Raised Fist0
CSSmarkup~5 mins

Declaring 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

CSS variables let you store values you want to reuse. This makes changing styles easier and faster.

You want to use the same color in many places and change it once to update all.
You want consistent spacing or font sizes across your website.
You want to create themes that can switch colors easily.
You want to keep your CSS clean and avoid repeating the same values.
You want to make your design responsive by changing variables in media queries.
Syntax
CSS
:root {
  --variable-name: value;
}

.element {
  property: var(--variable-name);
}

Variables start with two dashes --.

Use var(--variable-name) to access the variable's value.

Examples
This sets a blue color variable and uses it for all <h1> headings.
CSS
:root {
  --main-color: #3498db;
}

h1 {
  color: var(--main-color);
}
This stores padding size in a variable and applies it to a container.
CSS
:root {
  --padding-size: 1.5rem;
}

.container {
  padding: var(--padding-size);
}
This saves a font family list in a variable and uses it for the whole page.
CSS
:root {
  --font-stack: 'Arial', sans-serif;
}

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

This example shows how to declare CSS variables for color, padding, and font size. The variables are used in the body and button styles. The media query changes padding and font size on small screens, showing how variables help with responsive design.

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: #e67e22;
      --padding: 2rem;
      --font-size: 1.25rem;
    }

    body {
      font-family: Arial, sans-serif;
      background-color: var(--primary-color);
      padding: var(--padding);
      font-size: var(--font-size);
      color: white;
    }

    button {
      background-color: white;
      color: var(--primary-color);
      border: none;
      padding: 0.5rem 1rem;
      font-size: var(--font-size);
      cursor: pointer;
      border-radius: 0.25rem;
    }

    button:hover {
      background-color: #d35400;
      color: white;
    }

    @media (max-width: 600px) {
      :root {
        --padding: 1rem;
        --font-size: 1rem;
      }
    }
  </style>
</head>
<body>
  <h1>Welcome to CSS Variables</h1>
  <p>This page uses variables for colors, padding, and font size.</p>
  <button>Click Me</button>
</body>
</html>
OutputSuccess
Important Notes

CSS variables are case-sensitive and must start with --.

You can override variables inside selectors or media queries for flexible designs.

Variables help keep your CSS DRY (Don't Repeat Yourself).

Summary

Declare CSS variables inside :root for global use.

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

Variables make styling easier to maintain and update.

Practice

(1/5)
1. What is the main purpose of declaring CSS variables inside :root?
easy
A. To limit variables only to the :root selector
B. To create variables that only work in inline styles
C. To make variables available globally throughout the CSS
D. To declare variables that only apply to JavaScript

Solution

  1. Step 1: Understand the role of :root in CSS

    The :root selector targets the highest-level element in the document, usually the <html> element.

  2. Step 2: Recognize variable scope

    Declaring variables inside :root makes them global, so they can be used anywhere in the CSS.

  3. Final Answer:

    To make variables available globally throughout the CSS -> Option C

  4. Quick Check:

    Global variables = :root declaration [OK]
Hint: Declare variables in :root for global access [OK]
Common Mistakes:
  • Thinking variables declared in :root are local
  • Confusing CSS variables with JavaScript variables
  • Assuming variables only work inline
2. Which of the following is the correct syntax to declare a CSS variable named --main-color with the value #3498db inside :root?
easy
A. :root { --main-color: #3498db; }
B. :root { main-color = #3498db; }
C. :root { $main-color: #3498db; }
D. :root { var(--main-color): #3498db; }

Solution

  1. Step 1: Recall CSS variable declaration syntax

    CSS variables start with two dashes -- and are declared with a colon : inside a selector block.

  2. Step 2: Check each option

    :root { --main-color: #3498db; } uses correct syntax: --main-color: #3498db;. Others use invalid symbols or keywords.

  3. Final Answer:

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

  4. Quick Check:

    Correct syntax = --name: value; [OK]
Hint: Use --name: value; inside :root [OK]
Common Mistakes:
  • Using = instead of : to assign values
  • Missing the double dash -- prefix
  • Trying to use var() in declaration
3. Given the CSS below, what color will the paragraph text be?
:root {
  --text-color: #ff0000;
}
p {
  color: var(--text-color);
}
medium
A. Red
B. Black
C. Blue
D. Green

Solution

  1. Step 1: Identify the variable value

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

  2. Step 2: Check how the variable is used

    The paragraph uses color: var(--text-color);, so it will use the red color.

  3. Final Answer:

    Red -> Option A

  4. Quick Check:

    Variable value applied = red [OK]
Hint: Match variable value with var(--name) usage [OK]
Common Mistakes:
  • Confusing hex codes with color names
  • Forgetting to use var() to apply variables
  • Assuming default color if variable is declared
4. What is wrong with this CSS code?
:root {
  --bg-color #ffffff;
}
body {
  background-color: var(--bg-color);
}
medium
A. Background color property is misspelled
B. Using var() incorrectly to apply variable
C. Variable name missing double dashes '--' prefix
D. Missing colon ':' after variable name in declaration

Solution

  1. Step 1: Check variable declaration syntax

    The declaration --bg-color #ffffff; is missing a colon : between the variable name and value.

  2. Step 2: Verify usage of variable

    The usage background-color: var(--bg-color); is correct, so the error is only in declaration.

  3. Final Answer:

    Missing colon ':' after variable name in declaration -> Option D

  4. Quick Check:

    Declaration syntax requires ':' [OK]
Hint: Always put ':' between variable name and value [OK]
Common Mistakes:
  • Forgetting colon ':' in variable declaration
  • Using var() without parentheses
  • Misspelling property names
5. You want to create a theme with two colors: --primary-color and --secondary-color. You want --secondary-color to be 50% transparent version of --primary-color. Which CSS variable declaration correctly achieves this?
hard
A. :root { --primary-color: 0, 0, 255; --secondary-color: rgba(var(--primary-color), 0.5); }
B. :root { --primary-color: #0000ff; --secondary-color: #0000ff80; }
C. :root { --primary-color: #0000ff; --secondary-color: rgba(var(--primary-color), 0.5); }
D. :root { --primary-color: #0000ff; --secondary-color: var(--primary-color, 0.5); }

Solution

  1. Step 1: Understand CSS variable limitations

    CSS variables hold values as strings; you cannot directly use var(--primary-color) inside rgba() expecting it to split into RGB components.

  2. Step 2: Check each option

    :root { --primary-color: #0000ff; --secondary-color: rgba(var(--primary-color), 0.5); } tries to use rgba(var(--primary-color), 0.5) but --primary-color is a hex string, so this won't work.
    :root { --primary-color: 0, 0, 255; --secondary-color: rgba(var(--primary-color), 0.5); } declares --primary-color as RGB components but CSS variables cannot hold multiple values like that easily.
    :root { --primary-color: #0000ff; --secondary-color: #0000ff80; } uses a hex color with alpha channel #0000ff80 which is blue with 50% opacity, correctly representing a transparent version.
    :root { --primary-color: #0000ff; --secondary-color: var(--primary-color, 0.5); } misuses var() with a second parameter that is not opacity.

  3. Final Answer:

    :root { --primary-color: #0000ff; --secondary-color: #0000ff80; } -> Option B

  4. Quick Check:

    Use hex with alpha for transparency in variables [OK]
Hint: Use hex with alpha channel for transparent colors [OK]
Common Mistakes:
  • Trying to use var() inside rgba() with hex colors
  • Declaring RGB as comma-separated string in variable
  • Misusing var() fallback parameter as opacity