CSS Variables (VIDEO)

Published on June 6, 2019

CSS allows you to define variables — just like a variable holds a value, CSS variables too hold a value. These variables can be defined once, and then they can used wherever required.

/* defining the CSS variable */
:root {
    --bg-color: #cccccc;

/* background color is effectively #cccccc */
#element {
    background-color: var(--bg-color);

Before CSS variables came up, developers used Javascript techniques to get their work done. But with CSS variables, many user interface problems have gone much simpler. In addition to that, few lines of CSS variables can do the same work as hundreds of lines of alternate code.

The below video will show you many interesting details, and possibilities of CSS variables. The slides in the video are a bit hazy, but you will be able to get an idea of what is happening. CSS can be powerful.

Useful resources

In this Tutorial