---
id: 5a9d725e424fe3d0e10cad10
title: Use CSS Variables to change several elements at once
challengeType: 0
videoUrl: 'https://scrimba.com/c/c6bDECm'
---
## Description
CSS Variables are a powerful way to change many CSS style properties at once by changing only one value.
Follow the instructions below to see how changing just three values can change the styling of many elements.
## Instructions
In the penguin
class, change the black
value to gray
, the gray
value to white
, and the yellow
value to orange
.
## Tests
```yml
tests:
- text: penguin
class should declare the --penguin-skin
variable and assign it to gray
.
testString: assert(code.match(/.penguin\s*?{[\s\S]*--penguin-skin\s*?:\s*?gray\s*?;[\s\S]*}/gi), 'penguin
class should declare the --penguin-skin
variable and assign it to gray
.');
- text: penguin
class should declare the --penguin-belly
variable and assign it to white
.
testString: assert(code.match(/.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi), 'penguin
class should declare the --penguin-belly
variable and assign it to white
.');
- text: penguin
class should declare the --penguin-beak
variable and assign it to orange
.
testString: assert(code.match(/.penguin\s*?{[\s\S]*--penguin-beak\s*?:\s*?orange\s*?;[\s\S]*}/gi), 'penguin
class should declare the --penguin-beak
variable and assign it to orange
.');
```
## Challenge Seed
## Solution
```js
var code = ".penguin {--penguin-skin: gray; --penguin-belly: white; --penguin-beak: orange;}"
```