diff --git a/curriculum/challenges/_meta/basic-css/meta.json b/curriculum/challenges/_meta/basic-css/meta.json
index c52b7e2d18..8d5126f177 100644
--- a/curriculum/challenges/_meta/basic-css/meta.json
+++ b/curriculum/challenges/_meta/basic-css/meta.json
@@ -174,7 +174,7 @@
],
[
"5a9d7295424fe3d0e10cad14",
- "Cascading CSS variables"
+ "Inherit CSS Variables"
],
[
"5a9d72a1424fe3d0e10cad15",
@@ -187,4 +187,4 @@
],
"helpRoom": "Help",
"fileName": "01-responsive-web-design/basic-css.json"
-}
\ No newline at end of file
+}
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/cascading-css-variables.english.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/inherit-css-variables.english.md
similarity index 91%
rename from curriculum/challenges/english/01-responsive-web-design/basic-css/cascading-css-variables.english.md
rename to curriculum/challenges/english/01-responsive-web-design/basic-css/inherit-css-variables.english.md
index 69e1b075a4..1fbf7f7036 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/cascading-css-variables.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/inherit-css-variables.english.md
@@ -1,20 +1,20 @@
---
id: 5a9d7295424fe3d0e10cad14
-title: Cascading CSS variables
+title: Inherit CSS Variables
challengeType: 0
videoUrl: 'https://scrimba.com/c/cyLZZhZ'
---
## Description
-When you create a variable, it is available for you to use inside the element in which you create it. It also is available for 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 html
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.
+When you create a variable, it is available for you to use inside the selector in which you create it. It also is available in any of that selector's descendants. This happens because CSS variables are inherited, just like ordinary properties.
+To make use of inheritance, 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 html
element. By creating your variables in :root
, they will be available globally and can be accessed from any other selector 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.
+Define a variable named --penguin-belly
in the :root
selector and give it the value of pink
. You can then see that the variable is inherited and that all the child elements which use it get pink backgrounds.
## Tests