Learn CSS Variables for free

This cours contains eight interactive tutorials to take you from beginner to advanced in CSS Variables.

    html, body {
        background: #ffeead;
        color: #ff6f69;
    }
    
    #navbar a {
        color: #ff6f69;
    }
    
    .item {
        background: #ffcc5c;
    }
    
    button {
    :root {
        --red: #ff6f69;
        --beige: #ffeead;
        --yellow: #ffcc5c;
    }
    
    html, body {
        background: var(--beige);
        color: var(--red);
    }
    
    h1, p {
        color: var(--red);
    }
    :root {
        --red: #ff6f69;
        --beige: #ffeead;
        --yellow: #ffcc5c;
    }
    
    html, body {
        background: var(--beige);
        color: var(--red);
    }
    
    h1, p {
        color: var(--red);
    }
    :root {
        --red: #ff6f69;
        --beige: #ffeead;
        --yellow: #ffcc5c;
    }
    
    html, body {
        background: var(--beige);
        color: var(--red);
    }
    
    h1, p {
        color: var(--red);
    }
    :root {
        --red: #ff6f69;
        --beige: #ffeead;
        --yellow: #ffcc5c;
    }
    
    html, body {
        background: var(--beige);
        color: var(--red);
    }
    
    h1, p {
        color: var(--red);
    }
    var root = document.querySelector(':root');
    var rootStyles = getComputedStyle(root);
    var yellow = rootStyles.getPropertyValue('--yellow');
    console.log('yellow: ', yellow);
    
    
    root.style.setProperty('--yellow', 'orange');
    /*Variable declarations*/
    
    :root {
        --red: #ff6f69;
        --beige: #ffeead;
        --yellow: #ffcc5c;
    }
    
    .grid {
        --columns: 200px 200px;
    }
    
    /* Styles */
    
    :root {
        --red: #ff6f69;
        --beige: #ffeead;
        --yellow: #ffcc5c;
        --main-color: var(--red);
    }
    
    html, body {
        background: var(--beige);
        color: var(--red);
    }
    
    h1, p {
        color: var(--red);

CSS Variables are like SASS variables on steroids

<br> 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.

Per Harald Borgen, course creator

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

What people say about this course

How about some company while you learn?

We've created a community chat so that you can ask questions, help others, and connect with like-minded people.

Join community chat