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 Introduction to My First Web Page

Peter Kadziela
Peter Kadziela
1,526 Points

Why is styling information in this example in the separate tab (style.css) and not within the index.html?

Why is styling information in this example in the separate tab (style.css) and not within the index.html?

3 Answers

M Baker
seal-mask
.a{fill-rule:evenodd;}techdegree
M Baker
Full Stack JavaScript Techdegree Student 5,983 Points

We place the styling CSS in a .css file so that it is easier to maintain and change. If you have 36 <p> tags throughout your page in different spots and you want to change them all to white you would have to change your index.html (or whatever the file name) in 36 spots; or in a master.css that is linked to your html page you could change it once p { color: white; } and done. This also allows you to have multiple styles being applied to the same page and still change it yourself - by linking them to the page and then using CSS's cascading nature to override the other styles where needed. Checkout an intro course into CSS to learn more!

Peter Kadziela
Peter Kadziela
1,526 Points

Thank you andren, M Baker! Makes perfect sense.

andren
andren
28,521 Points

Because that's not only the recommended way of styling a page, but also by far the most common way used in actual development.

Keeping the styling in a separate files means that you can have one CSS file that is used to style multiple pages, which is extremely common in real web projects. Embedding the styling within style tags in HTML files means you would have to copy and paste it into other files that shared those styles, and if you ever decided to change a style you would have to manually go into each file to change it.

For this project since there is only one page it might have been simpler to just embed the CSS, but following best practices and trying to prepare students for real development is pretty important when teaching subjects like this.