• Hajipur, Bihar, 844101

☰
❮
❯

CSS

CSS Basics

CSS Styling Properties

CSS Advanced Selectors & Features

CSS Media and Image Styling

CSS Layout Techniques

CSS Flexbox

CSS Grid

CSS Responsive Design (RWD)

CSS Variables

← Previous Next →

🔹 What Are CSS Variables?

CSS Variables, also known as custom properties, are entities defined by authors that contain specific values to be reused throughout a document.

They help make styles more maintainable, reusable, and easier to update.

🔸 Syntax

:root {
  --main-color: #3498db;
  --font-size: 18px;
}
Usage:
h1 {
  color: var(--main-color);
  font-size: var(--font-size);
}

  • Variables start with --

  • Access them using var(--variable-name)

  • Declare them inside :root for global access

🔸 Scope of Variables

1. Global Scope
:root {
  --bg-color: #fff;
}

Accessible from anywhere in the CSS.

2. Local Scope
.card {
  --padding: 20px;
  padding: var(--padding);
}

Only accessible within .card and its children.

🔸 Fallback Values

color: var(--primary-color, blue);

If --primary-color is not defined, blue will be used.

🔸 Updating Variables with JavaScript

document.documentElement.style.setProperty('--main-color', 'red');

CSS variables are dynamic and can be changed via JavaScript at runtime.

🔸 Benefits of CSS Variables

  • Reusability

  • Centralized control

  • Easy theme management (light/dark modes)

  • JavaScript-friendly

🔸 Example: Light and Dark Theme

:root {
  --bg-color: #ffffff;
  --text-color: #000000;
}

.dark-theme {
  --bg-color: #000000;
  --text-color: #ffffff;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

Switch .dark-theme class to activate dark mode.

Practice Questions

Q1. Create a variable for primary color and apply it to headings.

Q2. Define a --radius and use it for button border-radius.

Q3. Use --font-base for font size of all paragraphs.

Q4. Add --box-shadow for cards and apply it.

Q5. Define a fallback for an undefined variable.

Q6. Set --container-width and use it in a .container class.

Q7. Change --main-color dynamically using JavaScript.

Q8. Create light and dark themes using CSS variables.

Q9. Apply --gap between grid columns.

Q10. Make a reusable --transition-speed variable and apply it to links.

CSS Variables Quiz

Q1: What is the correct syntax for a CSS variable?

A. --main-color: #fff;
B. var-main: #fff;
C. $main-color: #fff;
D. main-color = #fff;

Q2: Which selector is typically used for global variables?

A. *
B. :root
C. body
D. html

Q3: How do you use a CSS variable?

A. --main-color
B. var(--main-color)
C. $(--main-color)
D. {{main-color}}

Q4: What is the fallback in this rule: color: var(--text, black);?

A. white
B. black
C. text
D. --text

Q5: Where can local scoped CSS variables be defined?

A. Inside specific selectors
B. Only in :root
C. Only in JavaScript
D. Only in <style> tags

Q6: Which of the following is NOT true about CSS variables?

A. They can be reused
B. They can be scoped
C. They are replaced at compile time
D. They can be changed via JavaScript

Q7: What does setProperty('--main-color', 'red') do?

A. Adds a new element
B. Deletes the variable
C. Changes the value of a CSS variable
D. Creates a class

Q8: Which of these is a valid variable name?

A. --spacing
B. spacing
C. $spacing
D. ::spacing

Q9: Which of the following can use CSS variables?

A. color, padding, font-size
B. JavaScript only
C. Only fonts
D. Only colors

Q10: Why are CSS variables better than hardcoded values?

A. Slower rendering
B. Easier to maintain and update
C. Less readable
D. They don’t work on all browsers
← Previous Next →
Login
Go Back Top