freeCodeCamp Challenge Guide: Use CSS Selectors to Style Elements

Use CSS Selectors to Style Elements


Problem Explanation

CSS selectors are widely used to apply styling to all instances of a particular element.

To apply the color purple to all the h2s on the page, you can define the following CSS inside a <style></style> block.

h2 {
  color: purple;
}

This will apply the color purple to all <h2> headings. If you are using the style="color: purple" attribute on each <h2> element, you can remove it and instead define it in a single place inside a <style></style> block.

Solution (Click to show/hide)
<style>
  h2 {
    color: blue;
  }
</style>
<h2>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>
16 Likes

Hello,

I am having a problem with using CCS Selectors to Style elements. Here is a snippet of everything I’ve done. I only have one X and I don’t know how to solve it.

13 Likes

I am having the same issue as well. Some help would be greatly appreciated.

9 Likes

Same. This needs to be fixed guys. We’ve clearly followed everything.

22 Likes

Here’s the solution guys:
< style>
h2 {color: blue;}
< /style>

< h2>CatPhotoApp< /h2>

< p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.< /p>

I had to make spaces inside tags to could show you the code itself, just remove the space and should be good.

54 Likes

This is not the solution on mine.
Anyone know how to rectify or move on to next task?

7 Likes

Hey XanderHall,

I see from your code in lines 2 + 3 that it looks a little jumbled, I had a similar issue in the placement of the CSS element. I would reset the code and keep CSS style element at the top and away from the actual (h2>CatPhotoApp</h2) as the CSS element will point to this when you declare it, so it should look a little like the code above and you’ll be rockin’!

Keep on keepin’ on :slight_smile:

8 Likes

2 Likes

I have completed this challenge with the same solution that many other users have come to submit.

The one issue that I ran into that may help others here is that the challenge sometimes does not recognize a correct solution when pasting in from an external text editor. I ran into this as I like to edit with an external text editor because it will auto-complete the tags. However, when pasting into the browser and submitting it is incorrect. I instead had to type the solution manually in the browser and submit, then it accepted as correct.

Hope this helps,

-Crypt.

3 Likes

you have deleted your actual h2 element meaning youve made nothing blue.

1 Like

anyone have an example of a period is? lesson says that a css starts with a period and a class declaration doesn’t and I’m confused on the difference of the 2.

1 Like

I am just as confuse especially since I follow the lesson instruction accordingly. Is there a way that we can contact a Freecodecamp.org admin staff directly with questions pertaining to this lessons?

2 Likes

Spacing seems to be an issue here, which seems off putting. Nonetheless it accepted my answer. :laughing:

2 Likes

the problem here is with your h2 element…it has no opening i.e

1 Like