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

Will an element take on the CSS styling of another element if it's nested within it in the HTML file?

Example, I am doing the CSS basics course ( I've done it a few times so I can apply the basics differently on my end to get a better feel for CSS ), and the DIV element is nested within another DIV element which is styled so that it only takes up 60% width of the page. That means the DIV element nested will also inherit its' parent's styling, correct?

2 Answers

Yes, and no. The child elements do not inherit the styling of their parents, unless the css rule targets the children elements.

From the sounds of it, the parent div is targeted to have a width of 60%, and the child div is as wide as it's parent. What's happening is divs are block level elements, which means that the child div is being constrained in size by the parent.

If you gave the parent div a width of 60%, and a child div a width of 60%, the parent div will be 60% as you'd expect, but the child div would be 60% of the parent div. Which you can see here: https://codepen.io/anon/pen/PJwoWj

Side note: In this example, the parent div is actually a child itself, of the body element, which is also a child of the html element.

This makes a lot more sense as I continue to learn more about CSS. I had to give your statement a few reads before I had some better understanding. Thank you so much for this response. I appreciate it.