CSS Variables (Custom Properties)

CSS variables, or custom properties, are values defined with a -- prefix that can be reused throughout your CSS. They improve maintainability and allow dynamic styling.

Introduction to CSS Variables

CSS variables store reusable values like colors, fonts, or sizes. They are accessed using var().

:root defines global variables accessible anywhere in the document.
var(--property-name) is used to retrieve the variable’s value.

Example:

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --font-size: 16px;
}

body {
  background-color: var(--primary-color);
  color: var(--secondary-color);
  font-size: var(--font-size);
}

<h1>Welcome to CSS Variables</h1>
<p>This paragraph uses global CSS variables for background, text color, and font size.</p>

Fallback Values

Fallback values are used if a variable is not defined, ensuring consistent styling.

Example:

If -text-color is not defined, the text will default to black.
Fallbacks ensure robustness and prevent broken styles.

p {
  color: var(--text-color, black); /* Fallback to black */
  font-size: 18px;
  padding: 15px 20px;
  background-color: #e0e0e0;
  border-radius: 8px;
  text-align: center;
}

<p>This paragraph uses a CSS variable with a fallback color.</p>

Scope of Variables – Global vs Local

Variables can be global (accessible everywhere) or local (restricted to a selector).

Example – Global:

Global variables are accessible anywhere.

:root {
  --main-bg: #f0f0f0;
}

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

<h2>Global Variable Example</h2>
<p>The background color comes from a global CSS variable.</p>

Example – Local:

Local variables are only accessible within that selector and its children.

.card {
  --card-bg: #fff;
  background-color: var(--card-bg);
  padding: 20px;
  border-radius: 10px;
}

<div class="card">
  <h2>Local Variable Example</h2>
  <p>This paragraph uses a local variable for card background color.</p>
</div>

Dynamic Updates with JavaScript

CSS variables can be updated dynamically with JavaScript for themes or interactive designs.

Example:

<button id="theme-btn">Switch Theme</button>
<p style="color: var(--primary-color)">This text color will change dynamically.</p>

<script>
  const btn = document.getElementById("theme-btn");

  btn.addEventListener("click", () => {
    document.documentElement.style.setProperty('--primary-color', '#e74c3c');
  });
</script>

CSS Variables in Media Queries

Variables can be used in media queries to create responsive designs.

Example:

:root {
  --font-size: 16px;
}

@media (max-width: 600px) {
  :root {
    --font-size: 14px;
  }
}

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

<p>Resize your browser to see the font size change using CSS variables in media queries.</p>

Benefits of CSS Variables

Reusable values across CSS.
Easy to maintain and update.
Dynamic and interactive styling.
Natural inheritance of values.

HTML + CSS Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  :root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
    --font-size: 16px;
  }

  body {
    background-color: var(--primary-color);
    color: var(--secondary-color);
    font-size: var(--font-size);
    font-family: Arial, sans-serif;
    text-align: center;
    padding: 50px;
  }

  button {
    padding: 10px 20px;
    font-size: var(--font-size);
    background-color: var(--secondary-color);
    border: none;
    cursor: pointer;
  }

  @media (max-width: 600px) {
    :root {
      --font-size: 14px;
    }
  }
</style>
</head>
<body>
  <h1>CSS Variables Demo</h1>
  <p>Resize the browser to see responsive changes in font size.</p>
  <button>Click Me</button>
</body>
</html>