CSS block style and h2 elements

///

am trying to create CSS style block to change the color of my h2 element to blue

Your code so far


<style>
h2 { <h2>CatPhotoApp</h2> color: blue; }
</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="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>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.83 Safari/537.36.

Challenge: Use CSS Selectors to Style Elements

Link to the challenge:

The problem is here:

inside of your style tag you only need to specify which element you want to add style to and the things you want to add to it, something like this:

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

And inside the main tag you need to have the element, like this:

<main>
<h2>CatPhotoApp</h2> 
</main>

if you do it like this you’ll have your h2 element with the color blue :grin:

///
let me try again

see what I have

<style>

  h2 {  

   color: blue;

    }

    <h2>CatPhotoApp</h2>

</style>

but not working

could you share your whole code please? so i can see what’s wrong :smiley:

i just started the css challenge with adding colors on my html codes.
so the first challenge was to make my CatPhotoApp red which i got right as this below

CatPhotoApp

the next challenge was to use css selectors to style element, as in a better way to style ur code with colors. from the instruction given i did this

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

but am still not getting that of …your h2 element should be blue…
why? please help.

You can’t put other tags inside the style tags. You should have mot moved the h2 element inside the style tags


I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

///

h2 { color: blue; }

CatPhotoApp

///

i gotrit.
thanks

to post code you need tl use backticks, it doesn’t work if you don’t use those

///
noted, thanks
noted thanks
///

am still learning. i appreciate the encouragement.
<style>
.smaller-image {
  width: 100px;
}
</style>
its not running, kindly assist. thanks

Have you set the image element to use the smaller-image css class?

i dont get it, 
when i click run afterwards, one is checked. when i click run again, non is checked.
i dont under

I had a similar issue where the test complained that I wasn’t setting the image to 100 pixels. It failed when I was using the safari browser and I think some people have had issues with Firefox. Try Chrome or Edge to see if that resolves the issue for you.

at the present, am using chrome and having that problem

can you share your code for the image element

.smaller-image {
  width: 100px;
}

What do you have for this line of code:

<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>

Also which of the 2 tests is failing?

<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>

but i have gone pass this challenge along time.
my current challenge is under css, size ur image