I need help with CSS Selectors. i am new

Tell us what’s happening:
I don’t know why it’s telling me that the h2 element is not blue

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 10.0; 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

looks like you misunderstood some stuff.
Best thing to do is to reset the code (there is a button to reset it) and then start from scratch. Keep in mind that to define a new h2 style selector, you do it like below:

h2 {
    color: blue;
}

other notes: Using the correct case matters (blue not Blue) and not putting spaces in unexpected spaces matters. “color:” not “color :”

2 Likes

i still dont get what you mean because i just started css

watch this… https://www.khanacademy.org/computing/computer-programming/html-css/intro-to-css/p/css-basics

You are mixing up inline styles with using CSS selectors.

An inline style makes use of the style attribute available to all html elements. An example is below:

<body>
 <h1>CatPhotoApp</h1>  
 <p style="color: red;">This is information about the cat photo app</p>
</body>

You will notice above, that the p element is using the style attribute and the style definition is between the quotes " ".

The current challenge you are on wants you to use CSS Selectors to style all h2 elements. In this case, you will place your style definition inside the style element (between the <style> and </style> tags. Then as seen in the example, you would write the following to make all h2 elements have red text.

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

<body>
 <h1>CatPhotoApp</h1>  
 <h2>This h2 element will have red text</h2>
</body>

The general syntax for a CSS Selector is the element name followed by { and then you would write each property/value pair with the property name on the left followed by a colon : and then the property value on the right. After each property/value pair, you must put a semi-colon ; to designate where one pair ends and another pair begins. Lastly, you would close the style definition with a }. See below for the generic syntax for a CSS Selector to style an element:

<style>
  elementName {propertyName: propertyValue;}
</style>

<body>
 <elementName>CatPhotoApp</elementName>  
</body>

In a nutshell, you use tags (e.g: <p></p>;<body></body>;<script/>) in HTML
but in CSS you are talking about them, not using them, so you write

<style>
p {
   background: blue;
}
</style>
<p>Feels like a sunny summer day.</p>

There's something similar to what you wrote!

If you were using inline styling you would write:

<body>
   <p style="background:blue">Blue skies</p>
</body>

But inline style should not be your first choice.

1 Like