CSS Variables (Custom Properties) - A Beginner’s Guide

CSS Variables, also known as custom properties, allow you to define reusable values in your CSS stylesheets. They make it easy to maintain consistent styles and update values globally.

What Are CSS Variables?

CSS variables store values that can be reused throughout a stylesheet. They are defined using the -- prefix and accessed using the var() function.

Defining and Using CSS Variables

You can define CSS variables inside the :root pseudo-class to make them available globally.

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

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

Why Use CSS Variables?

Reusability: Define a value once and use it multiple times.
Easy Maintenance: Update the variable value in one place to apply changes everywhere.
Dynamic Styling: Can be updated with JavaScript for interactive designs.

Local vs. Global Variables

Variables defined inside a selector are local and only available within that selector.

.button {
    --btn-color: #e74c3c;
    background-color: var(--btn-color);
    color: white;
    padding: 10px 20px;
}

Using CSS Variables in Media Queries

CSS variables can be adjusted dynamically for responsive designs.

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

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

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

Updating CSS Variables with JavaScript

You can modify CSS variables dynamically using JavaScript.

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

Practical Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Pseudo-classes, Pseudo-elements & Variables Example</title>
    <style>
        /* Define CSS variables globally */
        :root {
            --primary-color: #3498db;
            --secondary-color: #2ecc71;
            --font-size: 16px;
        }
        
        /* Using CSS variables for styling */
        body {
            background-color: var(--primary-color);
            color: white;
            font-size: var(--font-size);
        }

        /* Button styles using local variables */
        .button {
            --btn-color: #e74c3c;
            background-color: var(--btn-color);
            color: white;
            padding: 10px 20px;
        }

        /* Responsive design with CSS variables */
        @media (max-width: 600px) {
            :root {
                --font-size: 14px;
            }
        }
    </style>
</head>
<body>
    <h2>CSS Variables Example</h2>
    <!-- Button demonstrating local CSS variables -->
    <button class="button">Click Me</button>
    
    <!-- Paragraph to show dynamic font size with variables -->
    <p>This text uses a CSS variable for font size.</p>

    <script>
        // JavaScript to update CSS variables dynamically
        document.documentElement.style.setProperty('--primary-color', '#ff5733');
    </script>
</body>
</html>

Try It Now

Conclusion

CSS variables provide a powerful way to manage styles dynamically and efficiently.