Next ❯

CSS Variables

  • Learn CSS variables to create reusable values for easier and consistent styling.

  • What Are CSS Variables ?

    CSS Variables (also called Custom Properties) are used to store values such as colors, spacing, fonts, or sizes and reuse them across your CSS.

    In simple words:

    CSS variables are reusable containers for values.

    They are written like this:

    --variable-name

    And used like this:

    var(--variable-name)

    Why CSS Variables Are Important

    Before CSS variables:

    Same color written again and again
    Hard to update designs
    No easy way to manage themes

    With CSS variables:

    Change once → updates everywhere
    Clean, readable CSS
    Easy dark / light themes
    Modern, scalable styling

    Real-life comparison:
    Saving a phone number in contacts - update it once, and every call uses the new number.

    Why Use CSS Variables ? 

    Reusability

Why Use CSS Variables (Reusability)

CSS variables allow you to reuse values like colors in multiple places, making your code cleaner and easier to maintain. 

h1 { color: blue; }
p { color: blue; }
button { background-color: blue; }
  • Same value repeated
    Painful to change later

Using CSS Variables for Reusability

CSS variables store reusable values that can be applied throughout the stylesheet using var(). 

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

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

  • One value
    Used everywhere

    Real-life comparison:
    Using the same paint color for all rooms.

    Easy Theme Switching

    CSS variables make theme switching super simple.

Light Theme with CSS Variables

CSS variables can define theme colors like background and text, making it easy to switch themes later. 

:root {
  --bg-color: white;
  --text-color: black;
}

Dark Theme with CSS Variables

A dark theme can override CSS variables to change background and text colors dynamically. 

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

Using Theme Variables

var() applies CSS variables to properties like background and text color. 

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

  • Switch theme by adding/removing a class
    No need to rewrite CSS

    Real-life comparison:
    Switching your phone to dark mode.

    Where Do We Declare CSS Variables ?

    Global Variables (:root)

Global CSS Variables

CSS variables are commonly declared inside :root to make them globally accessible throughout the stylesheet. 

:root {
  --main-color: #1a73e8;
  --padding-size: 16px;
}
  • Available everywhere
    Best practice for large projects

Local (Scoped) CSS Variables

CSS variables declared inside a selector are scoped locally and can only be used within that element and its children. 

.card {
  --card-bg: #f5f5f5;
  background-color: var(--card-bg);
}

  • Works only inside .card

    Real-life comparison:
    Rules that apply only inside one department.

    Common Uses of CSS Variables in Real Projects

    Colors

    :root {

      --primary: #4CAF50;

      --secondary: #FF9800;

    }

    Spacing

    :root {

      --space-sm: 8px;

      --space-lg: 24px;

    }

    Fonts

    :root {

      --main-font: Arial, sans-serif;

    }

CSS Variables with calc()

CSS variables can be used inside calc() to create dynamic and flexible calculations. 

.box {
  width: calc(100% - var(--space-lg));
}

  • Flexible layouts
    Responsive calculations

    Fallback Values 

    If a variable is missing, you can provide a backup value.

CSS Variable Fallback Value

You can provide a fallback value inside var() that is used if the variable is not defined. 

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

  • Prevents breakage
    Safe CSS

    CSS Variables vs Preprocessor Variables

    CSS VariablesSASS Variables
    Runtime changeCompile-time only
    Work with JavaScriptCannot
    Dynamic themesStatic
    Native browser supportBuild-tool dependent

Complete CSS Variables Practical Example

This example shows how global CSS variables make styling reusable, consistent, and easy to maintain. 

<!DOCTYPE html>
<html>
<head>
    <title>CSS Variables Example</title>
    <style>
        :root {
            --primary-color: #1a73e8;
            --card-padding: 20px;
        }

        body {
            font-family: Arial, sans-serif;
            padding: 40px;
        }

        .card {
            padding: var(--card-padding);
            border: 2px solid var(--primary-color);
            width: 250px;
        }

        button {
            background-color: var(--primary-color);
            color: white;
            padding: 10px 16px;
            border: none;
            cursor: pointer;
        }

        button:hover {
            opacity: 0.9;
        }
    </style>
</head>
<body>
    <div class="card">
        <h2>Product</h2>
        <p>Reusable CSS variables example</p>
        <button>Buy Now</button>
    </div>
</body>
</html>

  • Consistent design
    Easy updates
    Clean CSS

    Common Mistakes

    Forgetting -- in variable name
    Using variables without var()
    Declaring everything locally
    Overusing variables unnecessarily

    Best Practices for CSS Variables

    Declare global variables in :root
    Use clear, meaningful names
    Group variables logically
    Use for colors, spacing, fonts
    Avoid hard-coded values

    Variables = reusable storage
    One change affects the whole site
    Perfect for theming
    Clean, modern CSS approach

    CSS variables store reusable values
    Improve maintainability
    Enable easy theme changes
    Work dynamically at runtime
    Essential for modern CSS

Next ❯