CSS Variables Practice Questions with Solutions

By /

Introduction

CSS Variables, also known as Custom Properties, allow you to store reusable values such as colors, font sizes, spacing, and borders. Instead of repeating the same value multiple times, you can define it once and use it throughout your stylesheet. CSS variables make code easier to maintain, improve consistency, and simplify website updates. In this chapter, you’ll practice CSS variables through simple solved CSS Variables practice questions that are easy for beginners to understand.

Question 1: Create a CSS Variable

Problem Statement

Write CSS to create a custom property named --main-color with the value blue.

CSS Code

:root {--main-color: blue;}

Output

A CSS variable named --main-color is created with the value blue.

Explanation

  • :root defines global CSS variables.
  • Variables always begin with two hyphens (--).
  • The variable can be reused anywhere in the stylesheet.

Question 2: Use a CSS Variable

Problem Statement

Write CSS to apply the --main-color variable as the text color of a heading.

CSS Code

h1 {    color: var(--main-color);}

Output

The heading text displays in the color stored in --main-color.

Explanation

  • var() retrieves the value of a CSS variable.
  • var(--main-color) returns blue.
  • This avoids repeating the same color value.

Question 3: Create a Background Color Variable

Problem Statement

Write CSS to create a variable named --bg-color with the value lightgray.

CSS Code

:root {--bg-color: lightgray;}

Output

A CSS variable named --bg-color is created.

Explanation

  • Variables can store background colors.
  • They make it easy to update website themes.
  • Changing the variable updates every element using it.

Question 4: Use a Variable for Background Color

Problem Statement

Write CSS to apply the --bg-color variable as the background color of a <div>.

CSS Code

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

Output

The <div> displays the background color stored in --bg-color.

Explanation

  • background-color uses the variable value.
  • If the variable changes, the background updates automatically.
  • This improves code maintainability.

Question 5: Create a Font Size Variable

Problem Statement

Write CSS to create a variable named --heading-size with the value 32px.

CSS Code

:root {--heading-size: 32px;}

Output

A CSS variable named --heading-size is created with the value 32px.

Explanation

  • CSS variables can store sizes as well as colors.
  • The variable can be reused for multiple headings.
  • This ensures consistent typography across the website.

Question 6: Use a Font Size Variable

Problem Statement

Write CSS to apply the --heading-size variable to an <h1> element.

CSS Code

h1 {    font-size: var(--heading-size);}

Output

The <h1> displays the font size stored in --heading-size.

Explanation

  • var(--heading-size) retrieves the value of the variable.
  • The heading automatically updates if the variable changes.
  • This helps maintain consistent typography.

Question 7: Create and Use a Padding Variable

Problem Statement

Write CSS to create a variable named --padding-size with a value of 20px and use it for a <div>.

CSS Code

:root {--padding-size: 20px;}div {    padding: var(--padding-size);}

Output

The <div> displays with 20px padding on all sides.

Explanation

  • The variable stores the padding value.
  • var() applies the stored value.
  • Updating the variable changes the padding everywhere it is used.

Question 8: Use a Border Radius Variable

Problem Statement

Write CSS to create a variable for rounded corners and apply it to a button.

CSS Code

:root {--radius: 10px;}button {    border-radius: var(--radius);}

Output

The button displays with 10px rounded corners.

Explanation

  • Variables can store border radius values.
  • Reusing the variable keeps the design consistent.
  • One change updates all buttons using the variable.

Question 9: Use a Variable with a Fallback Value

Problem Statement

Write CSS to use the --main-color variable, but display black if the variable is not defined.

CSS Code

p {    color: var(--main-color, black);}

Output

The paragraph displays the main color if available; otherwise, it displays black.

Explanation

  • The second value inside var() is the fallback.
  • The fallback is used only if the variable does not exist.
  • This prevents missing variable errors.

Question 10: Create a Local CSS Variable

Problem Statement

Write CSS to create a variable that is available only inside a .card element.

CSS Code

.card {--card-color: lightblue;    background-color: var(--card-color);}

Output

The .card element displays a light blue background using its local variable.

Explanation

  • Variables defined inside a selector are local to that selector and its descendants.
  • Local variables are useful for component-specific styling.
  • They do not affect other elements on the page.

Key Takeaways

  • CSS variables are also called Custom Properties.
  • Variables are declared using two hyphens (--).
  • :root is commonly used to create global variables.
  • var() retrieves the value of a CSS variable.
  • Variables can store colors, sizes, spacing, borders, and more.
  • Fallback values can be provided using var(variable, fallback).
  • Variables can be global or local.
  • CSS variables make stylesheets easier to maintain and update.

Frequently Asked Questions (FAQs)

1. What are CSS Variables?

CSS Variables, also called Custom Properties, are reusable values that can store colors, sizes, spacing, and other CSS values.

2. How do I create a CSS variable?

Use:

:root {--main-color: blue;}

3. How do I use a CSS variable?

Use the var() function.

Example:

h1 {    color: var(--main-color);}

4. Why is :root commonly used for CSS variables?

:root creates global variables that can be accessed anywhere in the stylesheet.

5. What is a fallback value in CSS variables?

A fallback value is used when a variable is not defined.

Example:

color: var(--main-color, black);

6. Can CSS variables be local?

Yes. Variables can be declared inside a selector, making them available only to that element and its child elements.

7. What are the benefits of using CSS variables?

CSS variables help you:

  • Reuse values
  • Reduce duplicate code
  • Update designs quickly
  • Maintain consistent styling
  • Simplify theme customization

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top