Can someone help me out?

HTML-CSS
1

Tell us what’s happening: I am stocked where my h2 element should have the class red-text and my style sheet to declare a red text red-text class and have it color set to red.

Your code so far


<style>
h2{
  color:red;
}
.red-text{
  color:red-text;
}
</style>

<h2>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 6.1; rv:80.0) Gecko/20100101 Firefox/80.0.

Challenge: Use a CSS Class to Style an Element

Link to the challenge:

2

Hello and welcome back to the forums~!

Your h2 text is red in the preview window. However, you’ve applied the red colour directly to the h2 selector. Instead, you should apply the red colour to the .red-text class, and give the red-text class to your h2 element.

3

I have tried all possibilities i knew i need more explanations please.

4

This is a class selector. It applies the color: red-text; CSS value (red-text here is incorrect) to the class called red-text (which IS correct).

This h2 element should be given a class attribute with a value of "red-text".

The boilerplate has this set to blue. You should not change this (it demonstrates how class selectors override element selectors).

1 Like
6

Screenshot_2020-09-27 freeCodeCamp org(1)
What am i missing here?

7

Hi, sunnyjoe…
Maybe you should try this.

.red-text {color:red;}

CatPhotoApp

You should refer the h2 red-text to the “red text” of .red-text {color:red;}

Hope this will help you…

8

Sorry my bad, this is the code

<style>
  .red-text {color:red;}
</style>
<h2 class="red-text">CatPhotoApp</h2>
9

I am not suppose to make it an inline…

10

okay… but I think you need to refer h2 to red-text code above it

11

How do i do that please?

12

I think u need to code this

<h2 class="red-text">CatPhotoApp</h2>

13

Screenshot_2020-09-27 freeCodeCamp org(2)
Screenshot_2020-09-27 freeCodeCamp org(2)868×624 18.5 KB

Thank you. It is a success.

14

Glad to hear that. Your welcome :slight_smile:

1 Like
15

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

You can post solutions that invite discussion (like asking how the solution works, or asking about certain parts of the solution). But please don’t just post your solution for the sake of sharing it.
If you post a full passing solution to a challenge and have questions about it, please surround it with [spoiler] and [/spoiler] tags on the line above and below your solution code.

2 Likes
16

Thankyou so much for ur advice. I’m so sorry for what I’ve done :pray:

1 Like
17

You were trying to help, which is great. :slight_smile:

1 Like
18

I am sorry about this i don’t know about

19