Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML How to Make a Website Adding Pages to a Website Make an About Page

Nelson Cole
Nelson Cole
1,423 Points
Posted by Nelson Cole
Nelson Cole
1,423 Points

Select the image and set it to block???

What is wrong with what Ive done here?

<section> <img src="img/gratt.png" alt="profile picture" class="profile-photo" /> .img/gratt.png: {display: block; } <p>I am sure this will all pay off in the end</p>

  </section>

Thanks Nelson

Julie Myers
Julie Myers
7,627 Points
Julie Myers
Julie Myers
7,627 Points

Hi Nelson,

Your coding has the CSS rule in the middle of an HTML page. Basically, you can't do that.

The best habit to get into is to put your CSS in it's own .css file. Sometimes I will put my CSS inside the style element, that is in my HTML file, if I just trying something out really quick. So, here is what your coding should look like:

<style>
  .profile-photo {
     display: block; 
}
</style>

<img src="img/gratt.png" alt="profile picture" class="profile-photo" />
      <p>I am sure this will all pay off in the end</p>
  </section>

Notice that I am using the class "profile-photo" to target the image in the CSS rule. You were trying to use the src attribute, which you can do but you had the syntax incorrect.

3 Answers

Nelson Cole
Nelson Cole
1,423 Points
Nelson Cole
Nelson Cole
1,423 Points

I continue to get an error message with this code when trying to set the image to block???

<section> <img src="img/gratt.png" alt="profile picture" class="profile-photo" /> .img/gratt.png: {display: block; } <p>I am sure this will all pay off in the end</p>

  </section>
Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,252 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

Hi Nelson,

I think what you're trying to do is put the styles in a HTML styles attribute.

img style=""

And you'd put your styles in there.

In an external stylesheets, the syntax for CSS is this...

selector {
  Property: value;
}
Erik S.
Erik S.
9,789 Points
Erik S.
Erik S.
9,789 Points

Hi Nelson, You can select the image in various ways. One is the img tag. The other is the class .profile-photo. You have to specifiy that in the css file itself not in the html file. If you want to write inline style, than you can use an attribute: style=¨display:block¨. But I am sure the challenge wants you to write out the css code in the css files with one of the two options I have given above. Let me know, if it works