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

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!

Thank you andren, M Baker! Makes perfect sense.

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.