2.6 KiB
2.6 KiB
id | title | challengeType | videoUrl |
---|---|---|---|
bad87fee1348bd9aedf04756 | Override Styles in Subsequent CSS | 0 | https://scrimba.com/c/cGJDQug |
Description
body
element's CSS declaration!
We just proved that our classes will override the body
element's CSS. So the next logical question is, what can we do to override our pink-text
class?
Instructions
blue-text
that gives an element the color blue. Make sure it's below your pink-text
class declaration.
Apply the blue-text
class to your h1
element in addition to your pink-text
class, and let's see which one wins.
Applying multiple class attributes to a HTML element is done with a space between them like this:
class="class1 class2"
Note: It doesn't matter which order the classes are listed in the HTML element.
However, the order of the class
declarations in the <style>
section are what is important. The second declaration will always take precedence over the first. Because .blue-text
is declared second, it overrides the attributes of .pink-text
Tests
tests:
- text: Your <code>h1</code> element should have the class <code>pink-text</code>.
testString: assert($("h1").hasClass("pink-text"), 'Your <code>h1</code> element should have the class <code>pink-text</code>.');
- text: Your <code>h1</code> element should have the class <code>blue-text</code>.
testString: assert($("h1").hasClass("blue-text"), 'Your <code>h1</code> element should have the class <code>blue-text</code>.');
- text: Both <code>blue-text</code> and <code>pink-text</code> should belong to the same <code>h1</code> element.
testString: assert($(".pink-text").hasClass("blue-text"), 'Both <code>blue-text</code> and <code>pink-text</code> should belong to the same <code>h1</code> element.');
- text: Your <code>h1</code> element should be blue.
testString: assert($("h1").css("color") === "rgb(0, 0, 255)", 'Your <code>h1</code> element should be blue.');
Challenge Seed
<style>
body {
background-color: black;
font-family: monospace;
color: green;
}
.pink-text {
color: pink;
}
</style>
<h1 class="pink-text">Hello World!</h1>
Solution
// solution required