XQA
Back to Web Development
2026-04-075 min read

CSS Variables Custom Properties

Learn CSS Variables Custom Properties step by step with clear examples and exercises.

Why This Matters

CSS Variables, also known as Custom Properties, are an essential tool in modern web development. They provide a way to create reusable styles throughout your project, improving efficiency and consistency. Understanding and utilizing CSS Variables will not only make you more productive but also better prepared for real-world coding scenarios, exams, and job interviews.

Prerequisites

Before diving into CSS Variables, it's essential to have a solid grasp of:

  1. HTML basics: understand the structure of an HTML document, including elements, attributes, and tags.
  2. CSS fundamentals: be familiar with CSS selectors, properties, values, and cascading.
  3. Flexbox and Grid: having knowledge of these layout systems will help you make the most out of CSS Variables.
  4. Basic understanding of JavaScript is beneficial for interacting with CSS Variables using JavaScript.

Core Concept

CSS Variables, denoted by double dashes (--), are custom properties that store specific values for reuse throughout a document. They allow you to create a centralized location for managing styles and promote consistency across your web pages. By declaring variables, you can define common values, such as colors or fonts, once and then reference them wherever needed in your CSS file.

Declaring CSS Variables

To declare a CSS Variable, use the var() function in combination with the double dashes (--) notation:

:root {
--main-color: #34495e;
--secondary-color: #f2f2f2;
}

In this example, we're declaring two variables named main-color and secondary-color with the values of #34495e and #f2f2f2, respectively. The :root selector targets the root element of the document, making the variables globally accessible.

Using CSS Variables

Once you've declared a CSS Variable, you can use it like any other CSS property:

body {
background-color: var(--main-color);
color: var(--secondary-color);
}

In this example, we're using the var() function to set the background color and text color of the body element to the values of our main-color and secondary-color variables, respectively.

Inheritance and Specificity

CSS Variables follow the cascading principle, meaning they can be inherited by child elements:

:root {
--main-color: #34495e;
}

header {
background-color: var(--main-color);
}

footer {
background-color: var(--main-color);
}

In this example, both the header and footer elements inherit the main-color variable's value. If you were to declare a more specific rule for an element, it would override the variable's value within that context.

Advantages of CSS Variables

  1. Consistency: By storing common values as variables, you can ensure that your design remains consistent across your entire project.
  2. Efficiency: Instead of repeating the same values multiple times, you can simply reference the variable wherever needed.
  3. Flexibility: If you need to change a value, you only have to update it in one place, and all elements using that variable will be updated automatically.
  4. Maintenance: CSS Variables make it easier to manage styles when working on large projects or collaborating with others.
  5. Easier theming: By defining variables for common design elements like colors, fonts, and spacing, you can quickly switch between different themes by updating the variable values.
  6. Improved accessibility: CSS Variables make it easier to manage contrast ratios, text sizes, and other accessibility properties across your entire project.

Worked Example

Let's create a simple web page using CSS Variables:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Variables Example</title>
<style>
:root {
--main-color: #34495e;
--secondary-color: #f2f2f2;
--font-family: Arial, sans-serif;
--base-font-size: 16px;
}

body {
background-color: var(--main-color);
color: var(--secondary-color);
font-family: var(--font-family);
font-size: var(--base-font-size);
}

h1 {
font-size: calc(var(--base-font-size) * 1.5);
color: var(--main-color);
}
</style>
</head>
<body>
<h1>Welcome to my Web Page!</h1>
</body>
</html>

In this example, we've created four CSS Variables (--main-color, --secondary-color, --font-family, and --base-font-size) and used them throughout the stylesheet. The body background color, text color, font family, and base font size are set to the respective variables. We've also defined a larger font size for h1 elements using a calculated value based on the --base-font-size variable.

Common Mistakes

  1. Forgetting the double dashes (--) notation: Remember that CSS Variables must be declared with the var() function and the double-dash notation (e.g., --main-color).
  2. Not declaring variables at the root level: To make a variable globally accessible, declare it using the :root selector.
  3. Using invalid characters in variable names: CSS Variables can only contain alphanumeric characters, underscores (_), hyphens (-), and periods (.). Avoid spaces or other special characters.
  4. Not understanding inheritance and specificity: Be aware that CSS Variables follow the cascading principle, meaning they can be inherited by child elements and overridden by more specific rules.
  5. Forgetting to use var() function when using variables in values of other properties: When setting a property value with another variable, always use the var() function (e.g., background-color: var(--main-color);, not background-color: --main-color;).
  6. Not considering browser compatibility: While CSS Variables have good browser compatibility, older browsers may not support them fully. Be sure to test your designs in various browsers and use fallback strategies when necessary.
  7. Not taking advantage of JavaScript interaction: You can interact with CSS Variables using JavaScript's CSS.customProperties interface to dynamically change variable values based on user interactions or other factors.

Practice Questions

  1. Create a CSS file with variables for font-family, primary color, and secondary color. Use these variables in a body selector to set the background color, text color, and font family.
:root {
--primary-color: #34495e;
--secondary-color: #f2f2f2;
--font-family: Arial, sans-serif;
}

body {
background-color: var(--primary-color);
color: var(--secondary-color);
font-family: var(--font-family);
}
  1. A designer provides you with a variable named --header-color with the value of #ff6347. Create a CSS rule that sets the header's background color to this variable.
:root {
--header-color: #ff6347;
}

header {
background-color: var(--header-color);
}
  1. You have a variable named --font-size set to 16px. Create a CSS rule that sets the font size for all h2 elements to this variable.
:root {
--font-size: 16px;
}

h2 {
font-size: var(--font-size);
}

FAQ

  1. Can I use CSS Variables with media queries? Yes, you can use CSS Variables within media queries just like any other property.
@media (min-width: 768px) {
:root {
--header-height: 100px;
}

header {
height: var(--header-height);
}
}
  1. Are CSS Variables supported in older browsers? While CSS Variables are not fully supported in all browsers, they have good browser compatibility and are widely used in modern web development. You can use fallback strategies like using vendor prefixes or JavaScript to ensure compatibility with older browsers.
  1. Can I pass variables from JavaScript to CSS? Yes, you can use the CSS.customProperties interface in JavaScript to set or get values of CSS Custom Properties (Variables).
const css = document.styleSheets[0];
css.insertRule(`--header-color: #ff6347;`, css.cssRules.length);
  1. How do I reset a CSS Variable's value? To reset a CSS Variable's value, simply declare it again with a new value, or set it to its initial value using the initial keyword.
:root {
--main-color: initial;
}
CSS Variables Custom Properties | Web Development | XQA Learn