Turning Letters to Blue

HTML-CSS
#1

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:

#2

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
#3

H2 element still not turned to blue

#4

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.

#5

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

#6

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.

#7 
<style>

h2 {

   color: blue; 

 }

<h2>

"CatPhotoApp"

</h2>

</style>
#8

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

#9

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.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

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

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

These h2 tags here

do not belong in the style tags.

#12

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.

#13

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

#14

We need to see your updated code.

Please provide the FULL code.

Not just parts of it.

#15 
<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
#16

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

#17

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!

#18

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