Premium CSS Course

CSS Variables

CSS Variables (also known as Custom Properties) allow you to store values in a variable and reuse them throughout your CSS. They provide a way to create flexible, maintainable, and dynamic stylesheets that can be easily updated in one place.

What are CSS Variables?

CSS Variables are custom-defined values that can be reused throughout a stylesheet. These variables can store colors, fonts, spacing values, or any other property values. Using variables makes it easy to manage complex stylesheets, and it reduces the need to repeat the same values multiple times.

Declaring CSS Variables

CSS Variables are declared using the -- prefix followed by the variable name. They are typically declared within a selector, but they can also be declared globally in the :root selector to make them accessible throughout the entire document.

Example: Declaring CSS Variables


        :root {
            --main-color: #4CAF50;
            --font-size: 16px;
            --spacing: 10px;
        }

        body {
            font-size: var(--font-size);
            color: var(--main-color);
            margin: var(--spacing);
        }

In the example above, the :root selector defines global variables, which can then be reused in the body selector.

Using CSS Variables

To use a CSS Variable, you reference it using the var() function. This function can take two arguments: the name of the variable and an optional fallback value if the variable is not defined.

Example: Using CSS Variables


        body {
            background-color: var(--main-color, #f0f0f0); /* Fallback to #f0f0f0 */
            padding: var(--spacing, 20px); /* Fallback to 20px */
        }

If --main-color is not defined, the background color will fall back to #f0f0f0, and if --spacing is not set, the padding will be 20px.

CSS Variables in Media Queries

CSS Variables can also be used inside media queries to change values dynamically based on the screen size. This makes it easy to adapt your design for different devices.

Example: Using CSS Variables with Media Queries


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

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

        @media screen and (min-width: 768px) {
            :root {
                --font-size: 18px;
                --spacing: 15px;
            }
        }

        @media screen and (min-width: 1024px) {
            :root {
                --font-size: 20px;
                --spacing: 20px;
            }
        }

In this example, the font-size and spacing variables change based on the viewport size. The values are updated when the media query conditions are met.

Advantages of Using CSS Variables

Changing CSS Variables with JavaScript

CSS Variables can be manipulated through JavaScript, allowing you to dynamically change the values based on user interaction or other events. Here's an example of changing the background color using JavaScript:

Example: Changing CSS Variables with JavaScript


        // JavaScript to change the value of a CSS Variable
        document.documentElement.style.setProperty('--main-color', '#FF5733');

This code sets the value of --main-color to #FF5733, which will affect all elements that reference this variable in their styles.

Best Practices for CSS Variables