2.3 KiB
2.3 KiB
id | title | challengeType | videoUrl |
---|---|---|---|
bad87fee1348bd9aedf06756 | Override Class Declarations with Inline Styles | 0 | https://scrimba.com/c/cGJDRha |
Description
style
element CSS.
There are other ways that you can override CSS. Do you remember inline styles?
Instructions
inline style
to try to make our h1
element white. Remember, in line styles look like this:
<h1 style="color: green;">
Leave the blue-text
and pink-text
classes on your h1
element.
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: Your <code>h1</code> element should have the id of <code>orange-text</code>.
testString: assert($("h1").attr("id") === "orange-text", 'Your <code>h1</code> element should have the id of <code>orange-text</code>.');
- text: Give your <code>h1</code> element an inline style.
testString: assert(document.querySelector('h1[style]'), 'Give your <code>h1</code> element an inline style.');
- text: Your <code>h1</code> element should be white.
testString: assert($("h1").css("color") === "rgb(255, 255, 255)", 'Your <code>h1</code> element should be white.');
Challenge Seed
<style>
body {
background-color: black;
font-family: monospace;
color: green;
}
#orange-text {
color: orange;
}
.pink-text {
color: pink;
}
.blue-text {
color: blue;
}
</style>
<h1 id="orange-text" class="pink-text blue-text">Hello World!</h1>
Solution
// solution required