Why do you have to have a main.css page/why can you not just write this code on the index?

You can write it on index.html if you want to, but picture what would happen if your site had 15 different pages. Every time you'd want to say, change the background color, you'd have to go to EACH html page and change it. When you link to an outside .css file, you change one line, in this case one line in 'main.css' and all 15 of your pages that link to it are updated. When you start developing bigger sites, having all your css in your html isn't realistic when you sometimes have to update 500+ pages at once.

That's very helpful! Thanks!

hmm let's take it this way. You have to tell your friends about a reunion. you have 2 options,

1. Go and tell everybody individually.
2. Make a group on social media and add everyone to the group and make the announcement.

Which one is more efficient? ( P.S answer is 2nd option)

it's the same. Your are CSS file and your friends are HTML documents.

you can either type in the information each HTMLpage or make a single CSS page and just link it to all HTML pages.

It is more tidy that way.