"your h2 element should be blue."

Tell us what’s happening:
I followed the video to the letter, but it still keeps popping up with “your h2 element should be blue.” Am I missing something here?

  **Your code so far**

<style>
h2 {color: blue;}
</style>

<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>

<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" 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="https://freecatphotoapp.com/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/99.0.4844.74 Safari/537.36 Edg/99.0.1150.46

Challenge: Use CSS Selectors to Style Elements

Link to the challenge:

Okay. Lets Look at the Tutorial:
You might want to RESET the tutorial.



FIRST: The tutorial asks us to Delete our h2 element’s (INLINE) style attribute:

This is the <style> attribute:
(Inline styling is a <style tag > used directly in the HTML.)


<h2 style="color: red;">CatPhotoApp</h2>

To delete the Styling looks like this:

<h2>CatPhotoApp</h2>




SECOND: Create a CSS style block.
A CSS style block is formatted like this:

  h2{
  color:red;
  }




A CSS Style Block must be placed
between an Opening and Closing Style tag:

<style>
  h2{
  color:red;
  }
  </style>



THIRD: Turn all h2 elements blue.

<style>
  h2{
  color:CHANGE THE COLOR TO BLUE;
  }
</style>

<Style> tags are placed in the <head> section of the Document. But in the freeCodeCamp interface, we usually place them here:

Screenshot 2022-03-25 5.45.11 PM

Just to be clear, you have deleted the h2 element. Add it back.

1 Like