Use CSS selector to style elements challenge

HTML-CSS
1

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

  **Your code so far**


<style>
h2 {color:blue;}
</style>
Please, can someone help me out here, please? I believe I got the code correct but when I submit it says that the color should be blue.
<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>

Challenge: Use CSS Selectors to Style Elements

Link to the challenge:

2

You’ve deleted the actual <h2> element you want to change blue from the code. Your <style> tag is correct. You just need to add the <h2> element back in. I’d click the “Reset All Code” button to get it back and then be sure to add the <style> tags above the existing <h2> without deleting it.

3

I think you removed your h2 element all together.

The challenge wanted you to just remove the styling.
So you still need (minus the style declaration)

<h2 style="color: red;">CatPhotoApp</h2>

As well as the brand new CSS inside a <Style/> tag.

Hope this helps :sparkles:

4

I clicked the “reset code” button and added just the style tags and it still incorrect.

5

We’d need to see your new code in order to help you.

6
7

I have followed your instructions and it still did not work. Anything else I can do, please?

8

No, I mean we need you to copy/paste the most recent version of your code in here. Start by typing three backticks on a line by itself, then underneath those backticks copy/paste your code, then on a separate line after your code add three more backticks.

9

CatPhotoApp

10

CatPhotoApp

11

The backtick key on my keyboard is all the way in the upper left corner, just above the Tab key. Make sure you are doing three of those on a single line, then below that paste your code, and then on a separate line after your code another three bacticks.

12 
<style>
 <h2 {color: blue;}>CatPhotoApp</h2>
</style>
13

Click the “Reset All Code” button to get a fresh start, which will put the <h2> back where it belongs. You need to do two things:

  • Remove the style attribute from the existing <h2>. Do not do anything else to the <h2>.
  • Create a <style> block (this will be above the <h2>) and add the necessary CSS to turn the <h2> blue.

The <style> and <h2> elements are completely separate.

14

I have done exactly as you said, I still can’t get it correct. It’s getting frustrating.

<style>
<h2  {color: blue;}>CatPhotoApp</h2>
</style>

I have removed the style attribute which is style=“color:blue”.
I changed the ‘red’ to ‘blue’.
I put the style block without deleting the h2 element. I did this by pressing ‘enter’ to create space on top and underneath to add the style block: and .
I have added the CSS elements that the course talked about.
What else am I doing wrong? Just point me in the right direction, please so that I can leave this stage.

15

The <h2> does not go inside the <style> block. These are separate elements.

16

This is what it looks like now. But it still says incorrect.

<style>
</style>
<h2  {color:blue;}>CatPhotoApp</h2>

It still says that the ‘h2 element needs to be blue’. I have done all the course said to do. What else do I need to do, please?

17

You have them separated correctly, now you need to remove the CSS styling from the <h2> and add it to the <style>.

18

This is what I did.

<style>
   {color:blue;}
</style>
<h2>CatPhotoApp</h2>

I did and it was not correct. It’s still repeating that ‘your h2 element should be blue’ and ‘your stylesheet declaration should be valid with a semicolon and closing brace’.

19

You are much closer now. Your CSS is not defining which element you want to style. Look at the example in the instructions so see how they targeted the h2 element for styling.

20

It has worked. Thank you so much for your time, guidance and patience. I appreciate it.