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
Sarah Kaiser
289 PointsWhen changing the color of the footer, why do we add the css code in the <head></head> location instead of the footer?
Wouldn't it make it easier for organization if CSS edits were added to the corresponding section on the html file (so header css edits made in <header></header>, etc)? OR is that not done because the cascading nature of style sheets could make weird things happen? If that's why- then why not just add all the CSS edits to the very beginning or very end of the html code?
Sorry- I took one question and turned it into 5. Also, I haven't finished watching the video, so my questions might be answered there....
1 Answer
Marcus Parsons
15,719 PointsHey Sarah,
The reason why we put CSS in the <head> section is because that's where the styles are loaded before the body of the document is loaded. Everything that is in that <head> section is loaded before the body of the document is loaded, in fact. You can put inline styles in the footer itself, but you should avoid doing so. The reason being is that inline styles have to be updated by finding them on that specific page and then updating them that way.
When you're designing websites, you'll more often than not be replicating quite a bit of code across pages i.e. navigation and footer type elements. Each page will likely use the same navigation and have the same type of footer with common links, social media links, etc. And, as such, you'll want to be dynamic with your CSS and make it easier on yourself (and others) to update code.
This is why you link to a CSS sheet in your header so that multiple pages can share this sheet and have their code updated at the same time instead of having to go into each individual page and modify each and every inline style of CSS. Imagine having to search and replace every line of CSS code in a page. That would take a lot longer if you had several pages! lol And the external CSS stylesheets look so much better than inline styles.
Marcus Parsons
15,719 PointsMarcus Parsons
15,719 PointsBtw, since you may not know what I mean by inline styles, this is an example:
<p style="background-color:blue">My background is blue!</p>Sarah Kaiser
289 PointsSarah Kaiser
289 PointsMarcus!!!! Your answer was so good and made so much sense and was so so helpful. I think you just made me like the act of asking questions. Thank you.
...unfortunately I now foresee myself bombarding you with questions (that may or may not be related to coding)
Marcus Parsons
15,719 PointsMarcus Parsons
15,719 PointsBombard away, Ms. Sarah! I'm about to head to bed (no work until late tomorrow but need shut eye desperately). Leave 'em here, and if someone else doesn't answer them, rest assured that I will as soon as I can. :)