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

Per Harald Borgen3:083 months ago

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

Your first CSS Variable

Per Harald Borgen4:543 months ago

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

Overriding variables

Per Harald Borgen2:413 months ago

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

Local variables

Per Harald Borgen3:283 months ago

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

Theming with CSS Variables

Per Harald Borgen2:463 months 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

Per Harald Borgen3:483 months ago

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

Responsiveness and CSS Variables

Per Harald Borgen4:523 months 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

Per Harald Borgen2:463 months 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: