So far I've been coding in the main.css section however it doesn't make sense to me to write the p element there and when I try to write in index.html the code just shows up on the webpage...
Well in an actual coding environment you'll be using other systems that are unlike the one you're using here on Codecademy. Websites contain files starting as a HTML page which you code to make it have the skeleton of the website. The CSS section is just to take what you have in the HTML page and spice it up a little, but since it has its own language and rules that it has to follow you have to use another page for it. Then in order to use that page you have to link it to the HTML page with the
In short the reason you have two pages for HTML and CSS is the following:
Different Coding languages require own platforms.
CSS is only an extension of HTML not automatically built in.
Coding environments aren't like here. And files are ended with ".css" and ".html"
Codecademy is bracing you for future use and to educate you. It wouldn't be useful if everything wasn't as it would be in a regular coding environment