CSS Class Styling

Tell us what’s happening:

Can someone help me with this lesson? I have “passed” the following:

  1. Your h2 element should have the class red-text.
  2. Your stylesheet should declare a red-text class and have its color set to red.
  3. Do not use inline style declarations like style=“color: red” in your h2 element.

But the lesson says I have failed “Your h2 element should be red.”

Your code so far


<style>
  h2 .red-text {
    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 (Macintosh; Intel Mac OS X 10_10_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36.

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

remove the h2 completely in your css. Like so.
.red-text { color: red; }
You don’t need to add the h2 to this as you are styling the element via the class in css. You can do the same vice versa remove the .red-text and just have h2 it is doing the same thing except, by using a class and styling that only, means that only the elements in the page that have a
<div class="red-text">class name used</div>
will be affected and not all h2 that are in the page.

2 Likes

Hi,
under the style section you can stylize your tag and your class. If necessary you can stylize both at the same time just by adding a comma “,” between “h2” and “.red-text” (that would pass the test).
But usually you would stylize it on separated places (just as in the exercise’s example).
Soon you will understand how much this way is convenient

In this exercise i would suggest to let the h2 style blue (as it was at the beginning) and create a “.red-text” style in order to make some tests and see which one is gonna override the other :wink:
Good Luck & Have Fun