Learn CSS Variables for free

A full course on 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);