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

Feat: add new Markdown parser (#39800)

Browse Source 
and change all the challenges to new `md` format.
This commit is contained in:
Oliver Eyton-Williams
2020-11-27 19:02:05 +01:00
committed by GitHub
parent a07f84c8ec
commit 0bd52f8bd1
2580 changed files with 113436 additions and 111979 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,34 +6,31 @@ videoUrl: 'https://scrimba.com/c/cyLZZhZ'
forumTopicId: 301088
---
## Description
<section id='description'>
# --description--
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 that the variable is inherited and that all the child elements which use it get pink backgrounds.
</section>
`:root` is a <dfn>pseudo-class</dfn> 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.
## Tests
<section id='tests'>
# --instructions--
```yml
tests:
- text: The <code>--penguin-belly</code> variable should be declared in the <code>:root</code> and assigned the value <code>pink</code>.
testString: assert(code.match(/:root\s*?{[\s\S]*--penguin-belly\s*?:\s*?pink\s*?;[\s\S]*}/gi));
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.
# --hints--
The `--penguin-belly` variable should be declared in the `:root` and assigned the value `pink`.
```js
assert(
code.match(/:root\s*?{[\s\S]*--penguin-belly\s*?:\s*?pink\s*?;[\s\S]*}/gi)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<style>
@ -239,18 +236,8 @@ tests:
</div>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<style>:root {--penguin-belly: pink;}</style>
```
</section>