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 Treehouse Club: CSS My First Web Page Text Editors and External Style Sheets

James Lam
James Lam
336 Points
Posted by 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
231,269 Points
Steven Parker
Steven Parker
231,269 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
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.