Learn CSS Variables for free

This tutorial teaches you CSS Variables through eight interactive screencasts. It's value-packed from beginning to end, and is probably the fastest way to get an in-depth understanding of CSS Variables.

9 lessons | 31 minutes

    html, body {
        background: #ffeead;
        color: #ff6f69;
    }
    
    #navbar a {
        color: #ff6f69;
    }
    
    .item {
        background: #ffcc5c;
    }
    
    button {

Why learn CSS Variables - Intro tutorial

Per Harald Borgen3:082 years ago

    :root {
        --red: #ff6f69;
        --beige: #ffeead;
        --yellow: #ffcc5c;
    }
    
    html, body {
        background: var(--beige);
        color: var(--red);
    }
    
    h1, p {
        color: var(--red);
    }

Your first variable - CSS Variables tutorial

Per Harald Borgen4:542 years ago

    <html>
        <head>
            <link rel="stylesheet" href="index.css">
        </head>
        <body>
            <h1>index.html</h1>
            <script src="index.pack.js"></script>
        </body>
    </html>

The Responsive Web Design Bootcamp

Per Harald Borgen2:1122 hours ago

    :root {
        --red: #ff6f69;
        --beige: #ffeead;
        --yellow: #ffcc5c;
    }
    
    html, body {
        background: var(--beige);
        color: var(--red);
    }
    
    h1, p {
        color: var(--red);
    }

Overriding variables - CSS Variables tutorial

Per Harald Borgen2:412 years ago

    :root {
        --red: #ff6f69;
        --beige: #ffeead;
        --yellow: #ffcc5c;
    }
    
    html, body {
        background: var(--beige);
        color: var(--red);
    }
    
    h1, p {
        color: var(--red);
    }

Local variables - CSS Variables tutorial

Per Harald Borgen3:282 years ago

    :root {
        --red: #ff6f69;
        --beige: #ffeead;
        --yellow: #ffcc5c;
    }
    
    html, body {
        background: var(--beige);
        color: var(--red);
    }
    
    h1, p {
        color: var(--red);
    }

Theming - CSS Variables tutorial

Per Harald Borgen2:462 years ago

    var root = document.querySelector(':root');
    var rootStyles = getComputedStyle(root);
    var yellow = rootStyles.getPropertyValue('--yellow');
    console.log('yellow: ', yellow);
    
    
    root.style.setProperty('--yellow', 'orange');

Changing variables with JavaScript - CSS Variables tutorial

Per Harald Borgen3:482 years ago

    /*Variable declarations*/
    
    :root {
        --red: #ff6f69;
        --beige: #ffeead;
        --yellow: #ffcc5c;
    }
    
    .grid {
        --columns: 200px 200px;
    }
    
    /* Styles */

Responsiveness and variables - CSS Variables tutorial

Per Harald Borgen4:522 years ago

    :root {
        --red: #ff6f69;
        --beige: #ffeead;
        --yellow: #ffcc5c;
        --main-color: var(--red);
    }
    
    html, body {
        background: var(--beige);
        color: var(--red);
    }
    
    h1, p {
        color: var(--red);

Two inheritance examples - CSS Variables tutorial

Per Harald Borgen2:462 years ago

CSS Variables are like SASS variables on steroids 💪

CSS Custom Properties (aka Variables) is a big win for front-end developers. It brings the power of variables to CSS, which results in less repetition, better readability and more flexibility. Plus, unlike variables from CSS preprocessors, CSS Variables are actually a part of the DOM, which has a lot of benefits.

The course contains eight interactive screencasts. All are short and to the point. At the end of most of them, the instructor asks you to solve a challenge, directly in the screencast window. This is a great way of making sure the knowledge sticks, and you'll get to check if your solution matches the instructors.

What you'll learn:

Fundamentals of CSS Variables
Local variables and overriding
Creating themes with variables
Changing variables with JavaScript
Responsiveness with CSS Variables

... and more!

You can follow the course creator Per Harald Borgen on Twitter here.

people love this course 😍

And we think you will as well.

why you'll learn faster 🔥

Scrimba is the ultimate code learning experience. Don't believe us? See what people say at Twitter or watch the screencast below and judge for yourself.

Hi, I'm your teacher 👋

Per Harald Borgen

Front-end developer and co-founder of Scrimba. Per loves helping other people learn new skills so that they can improve their lives. He makes his tutorials as simple as humanly possible, and focus on getting the students to the point where they can start building projects on their own.

Thank Per for the course

secure your free spot

Enroll to ensure that you'll have free life-time access to this course.

100,000 people can't be wrong

Well over one hundred thousand people have enrolled in Scrimba courses. And as you can see below, quite a few of them have had their minds blown.

CSS Variables are like SASS variables on steroids 💪

Per Harald Borgen

Other courses