---
id: 5a9d7295424fe3d0e10cad14
title: Cascading CSS variables
challengeType: 0
videoUrl: 'https://scrimba.com/c/cyLZZhZ'
---
## Description
When you create a variable, it becomes available for you to use inside the element in which you create it. It also becomes available within any elements nested within it. This effect is known as cascading.
Because of cascading, CSS variables are often defined in the :root element.
:root
is a pseudo-class selector that matches the root element of the document, usually the
element. By creating your variables in :root
, they will be available globally and can be accessed from any other selector later in the style sheet.
## Instructions
Define a variable named --penguin-belly
in the :root
selector and give it the value of pink
. You can then see how the value will cascade down to change the value to pink, anywhere that variable is used.
## Tests
```yml
tests:
- text: declare the --penguin-belly
variable in the :root
and assign it to pink
.
testString: assert(code.match(/:root\s*?{[\s\S]*--penguin-belly\s*?:\s*?pink\s*?;[\s\S]*}/gi), 'declare the --penguin-belly
variable in the :root
and assign it to pink
.');
```
## Challenge Seed
## Solution
```js
var code = ":root {--penguin-belly: pink;}"
```