H2 class=red text is red

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

   **Your code so far**


<style>
{
   .h2{
   color: red;
   text: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; rv:88.0) Gecko/20100101 Firefox/88.0.

Challenge: Use a CSS Class to Style an Element

Link to the challenge:

2

Hello there.

Do you have a question?

If so, please edit your post to include it in the Tell us what’s happening section.

Learning to describe problems is an important part of learning how to code.

Also, the more information you give us, the more likely we are to be able to help.

at a glance I see an extra { right after the style opening tag, text is not avalid css rules, and you are missing quotes around the class attribute value

3

?

4

remove the text:red; , and you should be good to go!

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

Remove the additional curly bracket ( { )
Also, Please provide quotation marks " in the class name

6

Inside your style element, change the h2 selector to .red-text
and update the color’s value from blue to red .

Give your h2 element the class attribute with a value of red-text .

You forgot to change the  .h2 in the style as requested:
{
   .red-text{
   color: red;
   text:red;
 }
7

It did not work there is something wrong

8

what’s your new code?

9

Tell us what’s happening:
Describe your issue in detail here.
Inside your style element, change the h2 selector to .red-text and update the color’s value from blue to red .

Give your h2 element the class attribute with a value of red-text .
Your code so far


<style>

  .h2
  {
 .red-text;
   color: red;
   text; 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; rv:88.0) Gecko/20100101 Firefox/88.0.

Challenge: Use a CSS Class to Style an Element

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

h2

element should be red. Your stylesheet should declare a

red-text

class and have its color set to

red

.

10

I think you should remove .h2

11

h2 {

color: blue;

}

.red-text{

color: red;

}

12

It is great that you solved the challenge, but instead of posting your 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.

13

Many thanks for all your replies, I obviously have not got a grip on this yet and am going to spend a it more time studying looking at the basics instead of trying to wing it.

14

.red-text

remove this

this also

15

To solve your problem you have to remove : .h2 and text; red .

If you read the question carefully, you will easily understand the answer. :grinning:

Your code should look like this :

.red-text {
    color: red;
  }
16

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