freeCodeCamp

2.8 KiB

Raw Blame History

id	title	challengeType	videoUrl
bad87fee1348bd9aedf04756	Override Styles in Subsequent CSS	0	https://scrimba.com/c/cGJDQug

Description

Our "pink-text" class overrode our 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

Create an additional CSS class called 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

<style>
  body {
    background-color: black;
    font-family: monospace;
    color: green;
  }
  .pink-text {
    color: pink;
  }

  .blue-text {
    color: blue;
  }  
</style>
<h1 class="pink-text blue-text">Hello World!</h1>

2.8 KiB Raw Blame History