Use a CSS Class to Style an Element 1

HTML-CSS
1

Tell us what’s happening:

Your code so far


<style>
  h2 {color: red;}
  </style>
  <h2 class="red-text">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/66.0.3359.170 Safari/537.36 OPR/53.0.2907.99.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/basic-css/use-a-css-class-to-style-an-element/

2

It’s a trick question: what you’ve done is technically right, however it’s not fulfilling the requirements of the test. It’s not only asking you to change the color of the h2 element, it’s also asking you to do it by assigning a class to it.

As of now, you’ve correctly assigned the class “red-text” to your h2 element, however instead of changing the color property with the class, you did it through the h2 selector. You should instead create the .red-text class inside of the style tag and use it :slight_smile: