CSS

CSS (Cascading Style Sheets) is the language that brings web pages to life with colors, layouts, and animations. It works alongside HTML to create visually stunning and responsive designs. Let's explore the power of CSS.

CSS Variables

1 April 2025 | Category:

CSS variables, also known as Custom Properties, are an incredibly powerful tool in CSS that allow you to store values and reuse them throughout your stylesheet. This functionality simplifies styling, makes your code more maintainable, and improves flexibility. The var() function is used to access and apply CSS variable values.

🔹 What Are CSS Variables?

CSS variables enable you to define reusable values that can be referenced throughout your CSS file. These values can be anything, such as colors, fonts, margins, or even more complex property values.

🔹 Syntax of CSS Variables

--variable-name: value;

To declare a CSS variable, you define it with a -- prefix followed by the variable name and its value.

:root {
  --primary-color: #3498db;
  --font-size: 16px;
  --spacing: 20px;
}

Here:

  • --primary-color: Stores the value #3498db.
  • --font-size: Stores the value 16px.
  • --spacing: Stores the value 20px.

🔹 Using the var() Function

Once a CSS variable is declared, you can reference it using the var() function.

element {
  color: var(--primary-color);
  font-size: var(--font-size);
  margin: var(--spacing);
}

In this example, the color, font-size, and margin properties will use the values stored in the --primary-color, --font-size, and --spacing variables, respectively.

🔹 How to Use CSS Variables – Detailed Explanation

1. Defining CSS Variables:

You typically define CSS variables inside the :root pseudo-class, which makes them globally accessible across your stylesheet. However, you can also define them locally within specific elements or classes.

Example: Global Definition

:root {
  --background-color: #f0f0f0;
  --text-color: #333;
}

The :root selector targets the highest level of the document (usually the <html> element), making these variables available throughout your entire stylesheet.

Example: Local Definition

.container {
  --container-bg: #fff;
  --container-padding: 20px;
}

.container {
  background-color: var(--container-bg);
  padding: var(--container-padding);
}

In this case, the variables --container-bg and --container-padding are only available within the .container class, so they won’t affect other elements outside it.

2. Using the var() Function:

You use the var() function to access and apply the values of CSS variables.

Syntax:

property: var(--variable-name);
  • --variable-name: The name of the CSS variable you want to use.
  • var(): The function that gets the value of the variable.

Example:

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

In this example, the background-color and color properties are set based on the CSS variables --background-color and --text-color.

🔹 Benefits of Using CSS Variables

1. Reusability:

Variables can store values that are used multiple times, helping to avoid repetition and reduce the risk of errors. For example, if you need to update a color or spacing throughout the website, you only need to modify the value in one place, and it will automatically reflect everywhere the variable is used.

:root {
  --primary-color: #3498db;
}

button {
  background-color: var(--primary-color);
}

a {
  color: var(--primary-color);
}

If you decide to change the primary color, you only need to update the --primary-color variable.

2. Easier Maintenance:

CSS variables help with the maintainability of your code. If you want to modify the style of your website, you can simply change the value of the variable, and all instances using it will automatically update, saving time.

3. Dynamic Theming:

CSS variables allow you to create dynamic themes. You can easily switch between light and dark modes, for example, by changing the values of the variables and applying them to different parts of your CSS.

:root {
  --background-color-light: #fff;
  --background-color-dark: #333;
}

body {
  background-color: var(--background-color-light);
}

.dark-mode body {
  background-color: var(--background-color-dark);
}

In this example, by toggling the .dark-mode class on the <body> element, the background color changes from light to dark mode.

🔹 Variable Inheritance

CSS variables are inherited by default, which means that if you define a variable on a parent element (like :root), it will be accessible to all its child elements. However, if you define a variable on a specific element, it will only be available within that element and its descendants.

Example of Inheritance:

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

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

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

In this case, both the div and p elements inherit the --main-color variable from :root.

🔹 CSS Variables with Fallback Values

You can also specify fallback values in case the variable is not defined or is invalid. This is particularly useful for browser compatibility or for when the variable is not available.

Syntax:

property: var(--variable-name, fallback-value);

Example:

body {
  background-color: var(--background-color, #f0f0f0); /* If --background-color is not defined, fallback to #f0f0f0 */
}

If the --background-color variable is not defined, the background color will default to #f0f0f0.

🔹 CSS Variables with JavaScript

You can also manipulate CSS variables dynamically with JavaScript, allowing for real-time changes to the style of your page without requiring a page reload.

Example: Changing a CSS Variable with JavaScript:

document.documentElement.style.setProperty('--primary-color', '#ff5733');

This changes the value of --primary-color to #ff5733 on the fly, which will automatically update all elements using this variable.

🔹 Browser Support

CSS variables are widely supported in modern browsers like Chrome, Firefox, Safari, Edge, and Opera. However, they are not supported in Internet Explorer.

To ensure cross-browser compatibility, you may need to use polyfills for Internet Explorer or provide fallback styles.

🔹 Conclusion

CSS variables (var()) are a powerful feature that helps you make your CSS more dynamic, maintainable, and efficient. They allow for reusable values, easier styling adjustments, and enable the creation of dynamic themes. With their inheritance, fallback values, and compatibility with JavaScript, they greatly enhance the flexibility and customization of web designs.

Key Takeaways:

  • Use CSS variables to store reusable values for colors, sizes, fonts, and other properties.
  • You can declare variables in the :root selector for global use or locally within specific elements.
  • Use the var() function to access and apply these variables.
  • You can also set fallback values if the variable is not defined.
  • CSS variables are inherited by child elements, making them great for themes and styling consistency.