CSS Variables

❮ Previous Next ❯

CSS Variables (Custom Properties): Reusable Styles

CSS variables (officially known as Custom Properties) are reusable values defined with two dashes (--) that make your CSS code incredibly efficient and much easier to maintain.

They allow you to store values like colors, sizes, or fonts in one centralized place for easy global updates.
You use the var() function to apply these variables anywhere in your CSS.
They drastically improve code readability and ensure exact consistency across your entire stylesheet.

Syntax and Parameters

Syntax:

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

Parameters

Parameter	Description
`--custom-name`	(Required) The name of the custom property. It must start with two dashes (`--`). It is case-sensitive!
`fallback-value`	(Optional) A backup value used if the custom property is not defined or is invalid.

Basic CSS Variable Example

Variables are usually declared inside the :root pseudo-class. The :root selector matches the document's root element (the <html> tag), meaning variables defined here are "global" and can be accessed by any element on the page.

Global Variables Example:

<style>
    /* Step 1: Define the variables globally */
    :root {
        --main-bg-color: lightblue;
        --main-text-color: navy;
    }
    /* Step 2: Use the variables */
    body {
        background-color: var(--main-bg-color);
        color: var(--main-text-color);
    }
</style>

<h1>IntricateDevo Variables</h1>
<p>Powered by CSS variables!</p>

<!DOCTYPE html>
<html>
<head>
    <style>
        /* Step 1: Define the variables globally */
        :root {
            --main-bg-color: lightblue;
            --main-text-color: navy;
        }
        /* Step 2: Use the variables */
        body {
            background-color: var(--main-bg-color);
            color: var(--main-text-color);
            font-family: sans-serif;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>IntricateDevo Variables</h1>
    <p>This background and text color are powered by CSS variables!</p>
</body>
</html>

More Examples of CSS Variables

1. Themed Button Using CSS Variables

Variables are perfect for styling components like buttons. By assigning variables for background, text, and padding, you can easily change the theme of your entire website simply by modifying the :root block.

Themed Button Example:

<style>
    :root {
        --button-bg: navy;
        --button-text: white;
        --button-padding: 15px 30px;
        --button-radius: 8px;
        --hover-bg: lightblue;
        --hover-text: navy;
    }
    .btn {
        background-color: var(--button-bg);
        color: var(--button-text);
        padding: var(--button-padding);
        border-radius: var(--button-radius);
        transition: 0.3s;
    }
    .btn:hover {
        background-color: var(--hover-bg);
        color: var(--hover-text);
    }
</style>

<button class="btn">Primary Button</button>

<!DOCTYPE html>
<html>
<head>
    <style>
        :root {
            --button-bg: navy;
            --button-text: white;
            --button-padding: 15px 30px;
            --button-radius: 8px;
            --hover-bg: lightblue;
            --hover-text: navy;
        }
        .btn {
            background-color: var(--button-bg);
            color: var(--button-text);
            padding: var(--button-padding);
            border-radius: var(--button-radius);
            border: 2px solid navy;
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
            transition: 0.3s;
        }
        .btn:hover {
            background-color: var(--hover-bg);
            color: var(--hover-text);
        }
    </style>
</head>
<body style="text-align: center; padding: 50px;">
    <button class="btn">Primary Button</button>
</body>
</html>

In this example:

:root defines variables like --button-bg and --hover-bg.
These variables are applied to style a button, making theme updates effortless. If the client decides they want red buttons instead of navy, you only have to change the code in one place!

2. Dynamic Spacing Using CSS Variables

You can also store measurements (like pixels or percentages) in variables to enforce a consistent spacing system across your design.

Dynamic Spacing Example:

<style>
    :root {
        /* Centralized spacing variable */
        --spacing: 20px;
    }
    .box {
        /* Applying the spacing variable to margin */
        margin: var(--spacing);
    }
</style>

<div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
</div>

<!DOCTYPE html>
<html>
<head>
    <style>
        :root {
            /* Centralized spacing variable */
            --spacing: 20px;
        }
        .container {
            display: flex;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: lightcoral;
            color: white;
            font-weight: bold;
            display: flex; align-items: center; justify-content: center;
            /* Applying the spacing variable to margin */
            margin: var(--spacing);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">Box 1</div>
        <div class="box">Box 2</div>
        <div class="box">Box 3</div>
    </div>
</body>
</html>

In this example:

:root defines --spacing to set uniform spacing between boxes.
Changing the --spacing value in :root instantly adjusts the margin for all .box elements simultaneously.

Best Practices for CSS Variables

Define Variables in :root: Declare your global variables within the :root selector. This ensures they are accessible to every element throughout your entire stylesheet.
Use Descriptive Naming: Choose clear, semantic names for variables (like --primary-color or --base-padding) to greatly enhance readability and maintainability for other developers.
Leverage the Cascade: CSS variables obey standard cascading rules. You can override a global variable locally by redefining it inside a specific class selector, allowing for incredibly flexible theming (like toggling a "Dark Mode" class on the body).

Local Override Example:

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

/* Overrides the variable ONLY inside the .dark-mode container */
.dark-mode {
    --text-color: white; 
}

Exercise

Which selector is best practice for defining global CSS variables that you want to be accessible anywhere in your document?

body * (Universal Selector) :root #global

❮ Previous Next ❯

CSS Basics

Colors & BG

Box Model

Text Styles

CSS Layout

CSS Effects

Advanced