Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS Treehouse Club: CSS My First Web Page Text Editors and External Style Sheets

James Lam
James Lam
336 Points

CSS Vs CSS code in HTML

Hi there. In this exercise (beginner) they introduce CSS with heading styles. In the previous exercise there were heading styles laid out on the HTML.

So my question is - is it better to lay them out in CSS or as part of HTML. I also tried adding the heading styles to HTML in addition to keeping them in CSS and it seemed to work. In this case does HTML overrule the CSS?

2 Answers

Steven Parker
Steven Parker
210,443 Points

The precedence depends on where you add the CSS. If you place CSS directly on the HTML element using the "style" property, that will override any other CSS settings. But if you place it between "style" tags, then the regular cascade rules apply.

For rules with the same selector, or selectors of equal specificity, whichever comes last will override the others.

And "best practice" is to put all the CSS in a stylesheet separate from the HTML. That keeps the styling separate from the content, but also simplifies maintenance by having it all in one place.

Ben Reynolds
Ben Reynolds
35,170 Points

I would always use an external stylesheet. If you put all your css in an html style tag, you'd need to repeat that code on every page (at least for any css that is meant to be shared by multiple elements, which will be most of them). When it's time to add or modify the css, you'd have to go to every individual page and make the same change. But if every page pulls its css from the same document, you can modify it once and every page can be updated at once.

Another reason is the 'separation of concerns' design principle, where layout, functionality and styling should be independent of each other as much as possible to reduce the chance that updating one will break the other.

Even on a very small website, following these principles will save major headaches when you have to change something later.