--- id: 5a9d7286424fe3d0e10cad13 title: Attach a Fallback value to a CSS Variable challengeType: 0 videoUrl: 'https://scrimba.com/c/c6bDNfp' forumTopicId: 301084 dashedName: attach-a-fallback-value-to-a-css-variable --- # --description-- When using your variable as a CSS property value, you can attach a fallback value that your browser will revert to if the given variable is invalid. **Note:** This fallback is not used to increase browser compatibility, and it will not work on IE browsers. Rather, it is used so that the browser has a color to display if it cannot find your variable. Here's how you do it: ```css background: var(--penguin-skin, black); ``` This will set background to `black` if your variable wasn't set. Note that this can be useful for debugging. # --instructions-- It looks like there is a problem with the variables supplied to the `.penguin-top` and `.penguin-bottom` classes. Rather than fix the typo, add a fallback value of `black` to the `background` property of the `.penguin-top` and `.penguin-bottom` classes. # --hints-- The fallback value of `black` should be used in the `background` property of the `penguin-top` class. ```js assert( code.match( /.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi ) ); ``` The fallback value of `black` should be used in `background` property of the `penguin-bottom` class. ```js assert( code.match( /.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}/gi ) ); ``` # --seed-- ## --seed-contents-- ```html