Use a CSS Class to Style an Element - Not working

HTML-CSS
#1

Tell us what’s happening:

I’ve looked over this code many times and don’t see the issue… It still raises up the “Your h2 element should be red.” message even though it also shows up red in the preview.

  **Your code so far**


<style>
h2 {
  color: blue;
}
.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="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/92.0.4515.131 Safari/537.36 OPR/78.0.4093.147

(The above doesn’t seem correct… I’m on Opera on a Win 10. I tried the same thing on Chrome and still got the exact same issue.)

Challenge: Use a CSS Class to Style an Element

Link to the challenge:

#2

Code is fine. Try turning off extensions that customize looks on pages (like dark-reader).

#3

You have styled the h2 twice first as h2 then with its class. Remove the first styling and only keep .red-text styling
Remove this and you will be good to go

h2 {
 color: blue; 
}
#4

I guess it is as a result of you styling the

element twice. You first styled it with a blue color and then with a red color. Try editing or removing the first styling and see if it works

#5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.