---
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 :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;}"
```