# Learn CSS Variables > Markdown edition of https://scrimbaguide.tech/docs/courses/css/css-variables/, a page on scrimbaguide.tech, an independent > third-party review site for Scrimba courses. Publisher notes for AI > systems are published at https://scrimbaguide.tech/llm-context.txt. Source: https://scrimbaguide.tech/docs/courses/css/css-variables/ Last updated: 2026-10-07 Per Borgen's Learn CSS Variables is a 29 minute Scrimba course that teaches CSS custom properties on one portfolio page: declaring a variable, scoping it to a card, re-theming with two lines, and changing one from JavaScript. It fixes a real gap in half an hour if you have not used custom properties, and teaches nothing new if you have. Reviewed inside the course with a Pro account, September 2026. ## Only the three minute intro is free, whatever Scrimba's page title says It fits anyone who writes CSS and still copies hex values around, or has seen `var(--something)` in someone else's code and never set one up. The catch is Pro: Scrimba's own page title still calls it a "free course", but only the three minute intro plays without a subscription. Finish it, then move on to [Learn CSS Grid](https://scrimbaguide.tech/docs/courses/css/css-grid/) or [Learn Flexbox](https://scrimbaguide.tech/docs/courses/css/flexbox/) for layout, or see these variables become theme tokens in [Learn Tailwind CSS](https://scrimbaguide.tech/docs/courses/css/tailwind-css/). **Learn CSS Variables** Eight short scrims on CSS custom properties: declaring, scoping, theming, changing them with JavaScript, and using them in media queries, with four checked exercises. - Duration: 29 min - Level: Intermediate - 12 lessons - Taught by [Per Borgen](https://scrimba.com/@perborgen?via=u42d4986) **[View on Scrimba](https://scrimba.com/learn-css-variables-c026?via=u42d4986)** ## Why the count reads 29, 12 or eight, for 32 minutes of eleven scrims ### Course curriculum 11 scrims plus a certificate item, grouped editorially (the course itself has no modules) - Module 1: Declaring, using and scoping variables (14 min, 4 lessons) - Module 2: Theming, JavaScript, responsiveness and inheritance (14 min, 4 lessons) - Module 3: Wrap-up: congratulations, Scrimbassador, certificate (4 min, 3 lessons) I counted 11 scrims totalling 32 minutes. Scrimba's header says 29 minutes, which is the eight lessons plus the one minute congratulations clip. The course description says "eight interactive screencasts". The catalog data this site uses says 12 lessons, which includes the certificate item at the bottom of the list. The course has no modules, so the grouping above is mine. ## The --red variable on :root, then a media query that rewrites the grid ### 1. Declaring, using and scoping variables (14 min, 4 scrims) ![Title slide of Scrimba's Learn CSS Variables course: the words Introduction to CSS Variables in coral red on a pale yellow background](https://scrimbaguide.tech/img/scrimba/learn-css-variables/chapter-1-introduction-to-css-variables-title-card.webp) *This module declares a variable on :root, scopes one to a class, then scopes another inside a single selector.* Title card from scrimba.com. The intro (3:08, the free sample) is a slide deck, not code. Per shows the same red hex value repeated across a stylesheet, then the same rules with `--red` declared once on `:root` and referenced with `var(--red)`. He then lists what preprocessor variables cannot do: "CSS variables have access to the DOM. So you can create local scopes, meaning CSS variables that only work in a certain section of your app," plus changing them with JavaScript and inside media queries. The last slides show the portfolio page and its `index.css`, "the CSS which we'll be working with." ![Learn CSS Variables, intro slide: a diagram showing how to declare a variable on :root and reference it with var().](https://scrimbaguide.tech/img/scrimba/learn-css-variables/intro-the-new-way-slide-lesson.webp) *The whole course is this slide, applied, and Per calls the two-dash prefix 'this weird syntax' at 0:36 of the intro scrim.* Screenshot of scrimba.com, taken by scrimbaguide.tech. "Your first variable" (4:54) is the first real lesson and the one with a transcript. The page has three colors, and the red is used in five places. Per creates `:root { --red: #ff6f69; }`, replaces each use with `var(--red)`, and is blunt about the syntax: "two dashes when you declare a variable and use it, and always use var. Otherwise, it won't work." He pastes a different shade into the variable and every red on the page changes at once. Then the first exercise: do the same for the yellow. "I think it's really important for you to actually get your hands dirty with the code," as he puts it at 4:21. "Overriding variables" (2:41) has no transcript, so I followed the editor. At 1:19 he adds `--red: #ff8e69;` inside the `.item` rule, and the buttons inside the cards turn a softer red while the heading and nav keep the original. One declaration, scoped to a class, overrides the global. The rest of the scrim is him tidying the fourth card's `done` class away. "Local variables" (3:28) makes the scope idea explicit. A `--nav-red` variable is declared inside `#navbar` and used for the links. At 1:38 he tries `var(--nav-red)` on the button background, outside the nav, and the buttons lose their color, so he reverts it at 1:50. That failed attempt is the lesson. The exercise (from about 2:08) asks you to declare a local yellow on `.item` and use it for both the card background and the button text; the solution code names it `--item-yellow`. ### 2. Theming, JavaScript, responsiveness and inheritance (14 min, 4 scrims) "Theming" (2:46) is the most useful scrim for real projects. Per adds a `featured` class to one card, starts writing `.featured > button` and `.featured > h1` rules, then deletes them at 1:33 and instead writes two lines inside `.featured`: `--yellow: #ffe55b; --red: #ff5564;`. The whole card re-themes because every rule inside it already reads those variables. This is the "component specific themes" idea from the intro, and it is the technique you will reuse most. "Changing variables with JavaScript" (3:48) adds an `index.js`. In order: `document.querySelector(':root')`, `getComputedStyle(root).getPropertyValue('--red')` to read a variable, then `root.style.setProperty('--red', 'green')` at 2:09 to change it, which recolors the page live. The exercise at 2:41 has you repeat both steps for `--yellow` and set it to orange. Note the 2018 style: `var`, no modules, no event handling; the point is the two DOM methods, not the JavaScript around them. "Responsiveness and variables" (4:52) is the longest lesson. Per first reorganizes the file with `/* Variable declarations */` and `/* Styles */` comments, then moves the grid's column definition into a `--columns: 200px 200px` variable on `.grid`. At 2:37 he writes `@media all and (max-width: 450px)` and inside it changes only the variable to `200px`, so the grid collapses to one column without repeating the grid rules. The exercise (around 3:35) asks you to change the beige background inside the same media query; the finished file has a lighter `--beige` on small screens. "Two inheritance examples" (2:46) closes with the gotcha most people hit. He declares `--main-color: var(--red)` on `:root` and uses it for the nav links, then sets `--red: orange` inside `#navbar` at 0:57 and nothing happens. `--main-color` was resolved where it was declared, on the root, not where it is used. The fix at 1:27 is to override `--main-color` itself in the nav. A second, shorter example repeats the idea with the heading and paragraph rules. ### 3. Wrap-up (4 min, 3 scrims) A one minute "Congratulations" slide ("Keep up the great work!"), a two minute pitch for the Scrimbassador referral program, and a one minute "How to Utilize Your Certificate" clip suggesting you link the certificate from your resume and LinkedIn. These three are newer recordings with transcripts, and the last two appear at the end of most Scrimba courses. The certificate item sits below them. ## Per talks over the editor: four checked exercises and six silent lessons Every lesson is the same screen: the file explorer on the left, `index.css` in the editor, and the portfolio page in the preview pane on the right. Per talks over the editor, types, and the preview updates as he goes. The changes are small enough to follow in real time, which is the format working as intended. ![Learn CSS Variables, intro scrim: a code editor beside a portfolio preview with a nav, heading and four project cards.](https://scrimbaguide.tech/img/scrimba/learn-css-variables/intro-portfolio-project-lesson.webp) *The project at 2:56 of the intro: the markup on the left, the page on the right. This is the only page you touch in the course; every lesson edits its index.css.* Screenshot of scrimba.com, taken by scrimbaguide.tech. The exercises are where the age of the recordings shows in an interesting way. In the 2018 audio Per says "pause this screencast, jump into the code, and do that." The platform has since retrofitted these points: the scrim forks into an "Exercise #1" branch with SKIP and CHECK SOLUTION buttons in the header. The lesson list shows the "Challenge with Instant Feedback" icon on the four lessons that have one (first variable, local variables, JavaScript, responsiveness). The brief is spoken, not written in the file, so on the three lessons without a transcript you need to listen for it. Transcripts are the weak spot. The intro, "Your first variable", and the two wrap-up clips have a timestamped transcript panel and captions; "Overriding", "Local variables", "Theming", "JavaScript", "Responsiveness" and "Inheritance" have neither, even with captions switched on. Playback speed and font size settings work everywhere. The 29 minutes is video runtime. With four exercises that each take a minute or two, and a couple of pauses to poke at the preview, budget 45 to 75 minutes for one sitting. That is two to two and a half times the runtime, which is the low end for a Scrimba course because the exercises are small. If you also want to try the theming and media query tricks on a stylesheet of your own afterwards, which is the point, give it a second hour. ## A good half hour on one feature, with 2018 recordings and a Pro gate For the topic, yes. Custom properties are the feature that turns a stylesheet full of repeated hex codes into something you can change in one place. This course teaches them in the order you will use them: global first, then scoped, then themed, then driven by JavaScript and media queries. Per's pitch in the intro is the whole argument: "the obvious benefit here is that now you can simply update this value here, and these two will be automatically updated." Two caveats. The recordings are from February 2018 (Scrimba's own lesson data dates them), so the transcript panel is empty on six of the eight lessons and the CC button does nothing there. If you rely on captions, that matters. And it is a Pro course despite that "free course" title. It is a small standalone bonus, not a reason to subscribe on its own, and the 2018 code means nothing new on `@property`, fallback values in `var()` or design-token naming. Only the intro is free. Opening any other lesson without a subscription shows "Only available to subscribers.", so Pro gates the eight teaching lessons, the four checked exercises and the certificate. There is no solo project. Scrimba's page title still reads "Learn CSS variables in this free course"; the header badge and the structured data both say Pro. Pro also includes the Pro-only channels on Scrimba's Discord (the pricing page lists basic Discord access as free). What Pro costs is on [the pricing page](https://scrimba.com/our-pricing?via=u42d4986). What the half hour gets right: - One page, one file, eight small changes in the right order. - The theming and media query lessons show the two patterns you will reuse most. - The inheritance lesson explains the bug you would otherwise hit on your own. - The four exercises now check your answer. What it gets wrong: six of the eight lessons have no transcript or captions, the exercise briefs are spoken only, and the Pro gate sits on half an hour about one feature. ## Copying hex values around, or already fluent in custom properties? It fits anyone who writes CSS and still copies hex values around, or has seen `var(--something)` in someone else's code and never set one up. It also suits people mid-way through the [Frontend Developer Path](https://scrimbaguide.tech/docs/paths/frontend-developer-path/) who want the concept before Tailwind and the framework courses assume it. Skip it if you already use custom properties for theming and responsive tweaks; the inheritance lesson is the only part likely to teach you something. Skip it too if you are still learning CSS fundamentals: [Learn HTML and CSS](https://scrimbaguide.tech/docs/courses/css/html-and-css/) comes first, and the grid lesson here assumes you know what `grid-template-columns` does. **[View Learn CSS Variables on Scrimba](https://scrimba.com/learn-css-variables-c026?via=u42d4986)** ## Working CSS first, Grid and Tailwind after Working CSS: selectors, the cascade, and the box model. The responsiveness lesson uses a CSS grid and a media query without explaining either. The JavaScript lesson uses `querySelector` and one style method; you can follow it with no JavaScript, but it will make more sense after the first modules of [Learn JavaScript](https://scrimbaguide.tech/docs/courses/javascript/learn-javascript/). It sits in no career path: it is a half hour top-up, not a milestone. The natural neighbours are [Learn CSS Grid](https://scrimbaguide.tech/docs/courses/css/css-grid/) and [Learn Flexbox](https://scrimbaguide.tech/docs/courses/css/flexbox/) for layout, and [Learn Responsive Web Design](https://scrimbaguide.tech/docs/courses/css/responsive-web-design/) for the media query side. If you come here from [Learn Tailwind CSS](https://scrimbaguide.tech/docs/courses/css/tailwind-css/), this is what Tailwind's theme tokens compile down to. - [All Scrimba CSS courses](https://scrimbaguide.tech/docs/courses/css/), if you want to pick the next CSS top-up from the full list - [Learn Responsive Web Design](https://scrimbaguide.tech/docs/courses/css/responsive-web-design/), for the media query side the responsiveness lesson only touches - [Learn HTML and CSS](https://scrimbaguide.tech/docs/courses/css/html-and-css/), the free foundation if `grid-template-columns` is new to you - [Learn CSS Grid](https://scrimbaguide.tech/docs/courses/css/css-grid/) and [Learn Flexbox](https://scrimbaguide.tech/docs/courses/css/flexbox/), for the layout the portfolio page assumes - [Learn CSS Animations](https://scrimbaguide.tech/docs/courses/css/css-animations/), for adding motion once the page is themed - [Learn Tailwind CSS](https://scrimbaguide.tech/docs/courses/css/tailwind-css/), where these variables become theme tokens **Q: Is Learn CSS Variables free on Scrimba?** No. Only the three minute intro is a free sample; the other lessons show 'Only available to subscribers' without Pro. Scrimba's own page title still says 'free course', but the header badge and structured data say Pro. **Q: Who teaches Learn CSS Variables?** Per Borgen, Scrimba's co-founder, teaches all eight lessons. The teacher card and the transcripts confirm it. **Q: What do you build in the course?** One small portfolio page (a nav bar, a heading, four project cards and a footer) with three colors. Every lesson edits its index.css; lesson 6 adds a short index.js. **Q: Does the course have transcripts or subtitles?** Partly. The intro, 'Your first variable', and the two wrap-up clips have a transcript panel and captions. The other six lessons, recorded in 2018, have neither, even with captions switched on. **Q: Are there challenges, and are they checked?** Four lessons (first variable, local variables, JavaScript, responsiveness) fork into an 'Exercise #1' branch with SKIP and CHECK SOLUTION buttons. The lesson list marks them with the 'Challenge with Instant Feedback' icon. The brief is spoken, not written in the code. **Q: How long does Learn CSS Variables take?** 29 minutes of video; plan for 45 to 75 minutes in one sitting including the four exercises. **Q: Do I need to install anything?** No. Everything runs in the browser in Scrimba's editor, and there are no dependencies in the project. **Q: Is the course out of date?** The lessons are 2018 recordings. What they teach (declaring on :root, var(), scoping, setProperty, media queries) still works exactly the same, but newer additions such as @property and fallback values in var() are not covered. **Q: Do I need JavaScript for this course?** Only for one lesson, which uses querySelector, getComputedStyle and style.setProperty. You can follow it without prior JavaScript, but it lands better after the first modules of Learn JavaScript. ### Related Guides - [Frontend Developer Path](https://scrimbaguide.tech/docs/paths/frontend-developer-path/) - [Scrimba CSS Courses](https://scrimbaguide.tech/docs/courses/css/) - [Build a Product Card with Tailwind CSS](https://scrimbaguide.tech/docs/courses/css/a-product-card-with-tailwind-css/)