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

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

img and css

We are working on adjusting the about.html page. I had to change the display to block on the profile image in css. Can someone remind me why that doesn't affect other images on my main html page since they are using the same css page?

Hi Berenice,

If you post the CSS and HTML documents you're asking about, it would make it much easier for others to answer your question appropriately.

3 Answers

In this case, Berenice, you're changing the image with the class "profile-image" to display as "block".

.profile-image {
    display: block;
}

This won't effect any other images on your page because you've specifically selected the image with the class.

Bryan, I thought that should be the case as well, which is why I got confused for the question of "Select the image and set it to be a block element" I went to the css file and I did:

.profile-photo { display: block; }

and it did not work, but when I add the block element to :

img { display: block; }

it said that was correct. So then I got confused with the idea that all my html pages are using the same css page, wouldn't doing it the img { display: block; } way, change the setting on all my photos through out all my html pages?

Adam Moore
Adam Moore
21,956 Points

If you are using the same CSS page for all of your HTML pages, then yes, it would change them. However, it could be for a few reasons: 1) Your other images may be needing to be set to display: block (or already are set), in which case they would need to generalize to all images; 2) All other images are set with their own more precise selector, in which case setting a generic img { display: block; } wouldn't override each image's more-specific styles; or 3) They are just making you do it in the code challenge to check to see that you understand how to do it, and therefore may not actually matter for the actual production of all of the HTML pages being styled by the one single CSS sheet. There may be other reasons for setting this general image styling, but I can't think of any right off the top of my head.

gotcha! : ] Thank you!