waarom zou ik een apart css bestand maken als ik ale css in mijn html bestand kan schrijven?

Dat moet ook niet maar als je je stylesheed maakt moet die een appart zijn omdat daar geen html mag, en als je css gebruikt heb je een style sheed nodig

Omdat je dan je stylesheet op 1 plek hebt. Als je een aanpassing maakt dan wordt die doorgevoerd op alle HTML-bestanden. Zet je CSS in je HTML-bestand dan en je wilt een wijziging maken dan moet je uiteraard alle bestanden apart aanpassen.

Het is good practice in programmeren en IT, om de verschillende onderdelen gescheiden te houden.
Het maakt het overzichtelijker en beter onderhoudbaar.

Semantisch gezien moet html op zichzelf staan. De pagina moet normaal functioneren zonder stylesheets, javascript e.d.
Het is dan ook compatible met speciale browsers. Zoals voor handicaps.

Deze scheiding heeft ook als voordeel dat er meerdere mensen aan kunnen werken, zonder dat ze elkaar in de weg zitten.
Met stylesheets heb je nog een bijkomend voordeel dat je makkelijker kunt switchen naar een ander thema.

Het geeft ook voordeel met inlaad-tijd. Een losse stylesheet kan voor meerdere pagina's gebruikt worden en gecached door de browser. Dat scheelt boel inlaadtijd.
Mogelijk is er ook verschil met volgorde van inladen en kunnen losse files naast elkaar inladen, maar dat weet ik niet heel zeker.
Tot slot, als de style in de html zit en er zit een fout in, heeft dat invloed op de rest van de htmlcode. In een los bestand, wordt hooguit een stuk styling niet goed getoond, maar de pagina op zich wordt gewoon ingeladen.

De redenen zijn hierboven al gezegd, misschien kan ik nog een mooi voorbeeldje meegeven zodat je het nut van het splitsen begrijpt. :)

(syntax kan verkeerd zijn, don't blame me on that)

--------------

Vb1:

Code in html:

Hello world

Tweede paragraaf

Zoals je ziet heb je nu tweemaal eenzelfde stijl gebruikt voor de paragrafen, indien je dit wilt veranderen naar 20px zal je tweemaal een aanpassing moeten doen. Wat beter is, is dus een aparte style maken in de header van je html.

Hello world

Tweede paragraaf

Indien je nu de font-size wilt aanpassen hoef je het maar één keer te doen.


-------------

Vb2:

Eerste html bestand:

Hello world

Tweede paragraaf

Tweede html bestand:

Hello world, bestand 2

Tweede paragraaf, bestand 2

Indien je nu opnieuw de font-size wilt aanpassen voor alle paragrafen in je website, zal je dit opnieuw twee keer moeten aanpassen. Daar komt een css bestand goed ten pas.

Html bestand(en):

Hello world

Tweede paragraaf

Css bestand:
p{
font-size:14px;
}

Op deze manier hoef je het dus maar éénmaal aan te passen in het css bestand.


--------
Als ik je nog een tip mag geven, als je verder gaat met webdesign of programmeren, wees vooral lui.
Hiermee bedoel ik, zorg ervoor dat je structuur zodanig is, dat je bij aanpassingen telkens maar één iets hoeft te wijzigen.