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 trialJulie Baer
4,256 PointsWhy is the box-shadow and border-radius is applied to the div with the class Wildlife, not the image, is that an option?
This is in reference to the section "Design with latest features" in the CSS Basics section.
2 Answers
Jacob Mishkin
23,118 PointsI'm curious, why do you think they are applying styles to the div rather than the img itself? Remember the img is the background of the div. I think you are talking about the bear.jpeg.
Julie Baer
4,256 Points(this is in response to Jacob's answer - there were no comment boxes available)
Jacob - That makes total sense - thank you so much! He wasn't just styling the img, he was styling the div that contains the background, h1 and text. Thank you for explaining that so clearly and breaking it down with the code - I really appreciate your time! - Julie
Jacob Mishkin
23,118 Pointsexactly! Julie, not a problem, happy coding!
Julie Baer
4,256 PointsJulie Baer
4,256 PointsHi Jacob, Thanks for responding to my question⦠in the css sheet, all of the work is done under .wildlife{ } rather than img{ }. Maybe if I go back and look at the whole style sheet it will make sense to me, I just thought maybe there was some best practice rule I don't understand yet.
Jacob Mishkin
23,118 PointsJacob Mishkin
23,118 PointsIt's cool, let's break it down. The reason I asked you why do you think they are using a div is because I wanted to know what you thought about it. What is your process for understanding the concepts in the video.
Okay, so in the case of the div .wildlife, Guil is using the img as a background, not a standalone element.
okay, So let's take a look at the HTML, we can see that it's a div with text and a link.
Now in the CSS Guil is using the bear.jpg as the background for that div. That way he can have that jpeg be the background of the div, have the h1 and p tags, and style that div the way he wants. You can style an img element like that as well but, you can not have text ie h1 or p tags nested inside an image tag.
A couple of things are going on, one, Guil wants the jpeg to be the background of the div .wildlife rather than a standalone element so he can have an h1 and p tags there. Second, the border-radius and box-shadow are applied to style that div.
I hope this helps. If you have any questions please fee free to ask.