* feat(tools): add seed/solution restore script * chore(curriculum): remove empty sections' markers * chore(curriculum): add seed + solution to Chinese * chore: remove old formatter * fix: update getChallenges parse translated challenges separately, without reference to the source * chore(curriculum): add dashedName to English * chore(curriculum): add dashedName to Chinese * refactor: remove unused challenge property 'name' * fix: relax dashedName requirement * fix: stray tag Remove stray `pre` tag from challenge file. Signed-off-by: nhcarrigan <nhcarrigan@gmail.com> Co-authored-by: nhcarrigan <nhcarrigan@gmail.com>
1.4 KiB
1.4 KiB
id, title, challengeType, videoUrl, forumTopicId, dashedName
| id | title | challengeType | videoUrl | forumTopicId | dashedName |
|---|---|---|---|---|---|
| bad87fee1348bd9aedf08756 | Prioritize One Style Over Another | 0 | https://scrimba.com/c/cZ8wnHv | 18258 | prioritize-one-style-over-another |
--description--
Sometimes your HTML elements will receive multiple styles that conflict with one another.
For example, your h1 element can't be both green and pink at the same time.
Let's see what happens when we create a class that makes text pink, then apply it to an element. Will our class override the body element's color: green; CSS property?
--instructions--
Create a CSS class called pink-text that gives an element the color pink.
Give your h1 element the class of pink-text.
--hints--
Your h1 element should have the class pink-text.
assert($('h1').hasClass('pink-text'));
Your <style> should have a pink-text CSS class that changes the color.
assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;\s*\}/g));
Your h1 element should be pink.
assert($('h1').css('color') === 'rgb(255, 192, 203)');
--seed--
--seed-contents--
<style>
body {
background-color: black;
font-family: monospace;
color: green;
}
</style>
<h1>Hello World!</h1>
--solutions--
<style>
body {
background-color: black;
font-family: monospace;
color: green;
}
.pink-text {
color: pink;
}
</style>
<h1 class="pink-text">Hello World!</h1>