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 trialCarl Prude
Courses Plus Student 1,627 PointsWhy isn't responsive.css overriding my main.css? body background tag doesn't affect anything in #wrapper div.
Checked my HTML pages and I definitely have my responsive.css doc linked underneath main.css......when changing body element background to "navy" in responsive.css, only the areas outside of the #wrapper div id are turned navy. Shouldn't my navy command override the wrapper css since the wrapper declarations are in main.css (and thus, before my responsive.css file?) and the #wrapper div is INSIDE of the body tag?
4 Answers
Jason Anello
Courses Plus Student 94,610 PointsHi Carl,
Are you saying you had assigned a background-color to #wrapper
in main.css? I don't believe that was part of the project.
Anyways, elements can have their own background-color. It's not an inherited property.
So the wrapper div is not going to inherit the background color of the body regardless of where it's at in the css.
Chance Smith
6,525 PointsLook at your inspector in Chrome and see if you have a missing file announcement in your console. Maybe your link path is wrong.
Here is a javascript file error as an example. My file isn't missing but this console area is super helpful.
https://www.dropbox.com/s/6mzkj2m0n3kgtaf/Screenshot%202014-07-19%2010.00.09.png
Did that help?
Carl Prude
Courses Plus Student 1,627 Pointsmy link path is good. The WEIRDEST thing is that it worked for a second and then it stopped working. ugh...
Carl Prude
Courses Plus Student 1,627 PointsOkay i simply removed the background-color property for the #wrapper from my main css file and i got this thing to work. Problem is i don;t understand why i had to delete it. If the responsive.css loads AFTER my main.css it should over ride it so that's a bit annoying.
Carl Prude
Courses Plus Student 1,627 PointsCarl Prude
Courses Plus Student 1,627 Pointsthanks that clears it up. And yes, i went back and realized that the BG Color i added to main.css was an additional step i had taken. Once i removed it i was good to go. I didn't know that elements could maintain their individual colors, I assumed it was all inherited based on the parent! Thanks for clearing that up
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsYou're welcome.
Normally, the
color
property is inherited for most elements. It's thebackground-color
property that doesn't inherit.It would actually be pretty inconvenient if background-color inherited because then it would be harder to have different parts of your site have a different background-color.
Here's a property reference table for css2: http://www.w3.org/TR/CSS21/propidx.html
It has an inherited column, among other things, which shows you which properties can be inherited.