Bug with CSS Inline Styling Color Tutorial

HTML-CSS
1

Tell us what’s happening:

Hi all. Just giving a quick heads up, the Tutorial titled ‘Basic CSS: Change the Color of Text’ seems to be bugged.

1366×728

The tutorial test says “Your h2 element should be red,” but the element is colored red, as is clear in the code and the CSS preview window on the right hand side.

It’s not a super big deal, I can go and just manually click my way to the next tutorial, but it is a little confusing, and it would be nice to get certification for that lesson.

Your code so far


<h2 style="color: red;">CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>

<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>

<div>
  <p>Things cats love:</p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
</div>

<form action="/submit-cat-photo">
  <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
  <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
  <label><input type="checkbox" name="personality" checked> Loving</label>
  <label><input type="checkbox" name="personality"> Lazy</label>
  <label><input type="checkbox" name="personality"> Energetic</label><br>
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
</form>
</main>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.87 Safari/537.36.

Challenge: Change the Color of Text

Link to the challenge:

2

Hello!

I just tested this and it works fine, which is weird :thinking: . Did you try to remove the style="…", run the test and then add it again? I tested with style="color:red;" and style="color: red;" and both work.

Just to clarify, in case someone else is wondering, in HTML/CSS, the spacing is ignored (color: red; and color:red; works fine), but some of the Free Code Camp’s tests have some problems with spacing and formatting :stuck_out_tongue:.

1 Like
3

Do you have an extension installed that changes the page look? Like a dark mode/reader extension. If you do you need to disable it. You can use the dark mode theme under the profile settings instead.

2 Likes
4

That was exactly it, thank you.