---
id: 5a9d7286424fe3d0e10cad13
title: Attach a Fallback value to a CSS Variable
challengeType: 0
videoUrl: 'https://scrimba.com/c/c6bDNfp'
---
## 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 compatibilty, 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:
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 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.
## Tests
```yml
tests:
- text: Apply the fallback value of black
to the background
property of the penguin-top
class.
testString: 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), 'Apply the fallback value of black
to the background
property of the penguin-top
class.');
- text: Apply the fallback value of black
to the background
property of the penguin-bottom
class.
testString: assert(code.match(/.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}/gi), 'Apply the fallback value of black
to the background
property of the penguin-bottom
class.');
```
## Challenge Seed
## Solution
```js
var code = ".penguin-top {background: var(--pengiun-skin, black);} .penguin-bottom {background: var(--pengiun-skin, black);}"
```