Please help this GREEN programmer! or dude

Tell us what’s happening: hello i cant seem to get passed this lesson im pretty green but im sure im doing it right. this lesson is asking me to create a style block but when i do , im still not able to change my <h2 element blue. please help.

Your code so far







<style>
<h2 {color:blue;}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="/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; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/basic-css/use-css-selectors-to-style-elements/

you formatting your CSS incorrectly.

If you go back to the instructions and explanation, you’ll see you copies the inline formatting into the style brackets, but CSS has a different format, which is shown in the instructions for this challenge.

1 Like

thankyou very much for your input but if you can please expain it to me as if it was my first day. For this lesson where would i put my color command? since it doesnt want me to do inline.

when it says “at the top of your code” im assuming string 1

So you put it in the right spot, at the type. And you created the area for your CSS correctly.

<style>
.....
</style>

The thing is inline goes like this <h2 style="color: blue">CatPhotoApp</h2>
CSS should read like this:

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

In the CSS you’re online putting the style information.

Hope that helps and makes sense.

-Nao

you need to remove the open tag and close tag too, that is next to your h2 elements in your style…

You are getting a couple things mixed up, my friend, but it’s all good!
There’s a few ways to add CSS to a page.

One way to is add all your CSS at the top of the page inside the head, like this:

<head> 
     <style>
         h2 {
               color: blue;
           }
     </style>
</head>
<body>
.... 
</body>

The above code would actually turn all h2 elements on the page blue, which probably isn’t what you’re trying to do.

Another way to add your CSS is using inline styling, which seems to be what you’re trying to do.
This sort of CSS gets tagged on as an attribute to the actual INDIVIDUAL elements in the page.
This would only turn that individual HTML element blue.

<head> 
     <style>
         
     </style>
</head>
<body>

      <h2 style="color:blue;">CatPhotoApp</h2>
     
</body>

This code would only turn that particular HTML element blue.
This is called inline CSS.

You’re just starting out now, but eventually you’ll want to move away from doing inline CSS and start inserting all your CSS inside the “<style>” tag, and then target the h2 element directly with a class or a div. But don’t worry about that too much at the moment. Just giving you things to think about and google. Either one works– you just seemed to have gotten the two different ways mixed up.

Read this article from MDN on the subject if you ever forget about all this in the future. God knows I google and re-google simple stuff all the time as well.

Hope that helps.