gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(curriculum): Change wording to talk about inheritance not cascade (#36110)

Browse Source
This commit is contained in:
Oliver Eyton-Williams
2019-06-09 04:09:00 +02:00
committed by Randell Dawson
parent 5fb6d5fd6b
commit 43fa451a38
2 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
curriculum/challenges/_meta/basic-css/meta.json
View File

@ -174,7 +174,7 @@
],
[
"5a9d7295424fe3d0e10cad14",
"Cascading CSS variables"
"Inherit CSS Variables"
],
[
"5a9d72a1424fe3d0e10cad15",

10
curriculum/challenges/english/01-responsive-web-design/basic-css/cascading-css-variables.english.md → curriculum/challenges/english/01-responsive-web-design/basic-css/inherit-css-variables.english.md
View File

@ -1,20 +1,20 @@
---
id: 5a9d7295424fe3d0e10cad14
title: Cascading CSS variables
title: Inherit CSS Variables
challengeType: 0
videoUrl: 'https://scrimba.com/c/cyLZZhZ'
---
## Description
<section id='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 <dfn>cascading</dfn>.
Because of cascading, CSS variables are often defined in the <dfn>:root</dfn> element.
<code>:root</code> is a <dfn>pseudo-class</dfn> selector that matches the root element of the document, usually the <code>html</code> element. By creating your variables in <code>:root</code>, 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 <dfn>:root</dfn> element.
<code>:root</code> is a <dfn>pseudo-class</dfn> selector that matches the root element of the document, usually the <code>html</code> element. By creating your variables in <code>:root</code>, they will be available globally and can be accessed from any other selector in the style sheet.
</section>
## Instructions
<section id='instructions'>
Define a variable named <code>--penguin-belly</code> in the <code>:root</code> selector and give it the value of <code>pink</code>. 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 <code>--penguin-belly</code> in the <code>:root</code> selector and give it the value of <code>pink</code>. You can then see that the variable is inherited and that all the child elements which use it get pink backgrounds.
</section>
## Tests