CSS Treehouse Club: CSS My First Web Page Introduction to My First Web Page

Peter Kadziela
Peter Kadziela
1,525 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
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,525 Points

Thank you andren, M Baker! Makes perfect sense.

andren
andren
28,360 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.