Turning Letters to Blue

Tell us what’s happening:
Describe your issue in detail here.
The h2 element has been assigned to blue

   **Your code so far**

<style>
h2 {
  color: blue; 
}
<h2>
"CatPhotoApp"
</h2>
</style>
<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

Challenge: Use CSS Selectors to Style Elements

Link to the challenge:

You’ve put the <h2> inside of the <style> tags. You don’t want to do this. Only the CSS should go in the <style> tags.

1 Like

H2 element still not turned to blue

Can you paste your new code attempt in here so I can see what you did? Click on the </> button in the editor controls and then put your new code in between the back ticks.

I don’t know where the </> button is or the editor controls for that matter.

Then you can paste your code in here by putting three back ticks on a line by itself, then underneath that paste your code, then after your code go to a new line and put three more back ticks.

<style>

h2 {

   color: blue; 

 }

<h2>

"CatPhotoApp"

</h2>

</style>

Back ticks, not back slashes. Back ticks are in the upper left corner of my keyboard, they share the same key as the tilde ~.

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

<style>
h2 {
   color: blue; 
 }
<h2>
"CatPhotoApp"
</h2>
</style>type or paste code here

These h2 tags here

do not belong in the style tags.

I think it would help to look at the FCC example again.

This is the proper structure

<style>
  h2 {
    color: red;
  }
</style>

Follow that same structure, but the color needs to be blue instead of red.

Sorry, but that didn’t help. Still saying I need to turn the h2 element blue.

We need to see your updated code.

Please provide the FULL code.

Not just parts of it.

<style>
h2 {
   color: blue; 
 }
</style>
"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>type or paste code here

Problem is here

That is invalid html.
You need to remove the quotes from CatPhotoApp because they weren’t there before.

You need an opening h2 tag

Hi …
want to color an element? →

create an element within <main></main>
in this case it’s an <p> paragraph element

<p> I'm a paragraph </p>

now color it within <style> </style>

<style>

 /*we are coloring p element*/
p {
 color: red;
}

</style>

hope this helps!

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