How can I change the h2 element CatPhotoApp into blue?

HTML-CSS
1

Tell us what’s happening:

Your code so far


<style>

h2  {color: blue;}

CatPhotoApp

</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/68.0.3440.106 Safari/537.36.

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

2

Hi @dipsikharay ,

You have to apply the style in the following format:

<style>
h2 {
Properties
}
</style>
<h2> some heading </h2>
2 Likes
3

It seems like you have removed your <h2></h2> which should have been placed between the <main> tag and </style> tag

You have the text as CatPhotoApp but it should be between h2 tags and placed below </style>

4

You can specify the CSS of an element in two ways.

  1. inline-css: The style should be inside the element like the following:

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

Or

  1. Creating <style></style> and adding your CSS inside it (& also delete inline CSS):

If you want to add color red to the element first select it!

How to select it?

Look at the beginning of the tag and you’ll notice its name h2; write it between <style></style> and then open curly braces {} right after it just like in the following example:

<style>
      h2 {}
</style>

Until here, nothing is going to happen. I should also specify the color which should be red by writing: color: red to make all h2 elements red like the following:

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

The result: All headings of type h2 will become red.

The exercise wants you to use the second method of <style></style> to turn all h2 into blue

And of course, Only CSS should be inside the <style></style>. But the error in your code is that it looks like you are making the mistake of adding something else other than CSS like an HTML element or an irrelevant text.

By deleting that and keeping CSS codes only. It will work.

I hope this was helpful and good luck.

1 Like
5

Definitely works!!! thanks