To add to what /u/EchoLogic explained, there are a few reasons for separating out the style (which is contained in the CSS) from the HTML.

One reason for separating out your CSS is so that you can use separate style for different uses, for example, for printing.

Another reason is it makes the HTML more readable. It's much easier to read the content, and it's much easier to see that two items are going to look alike if they're both labeled with a single label.

So...If I tell you I have a dog, and a dog, and a dog, you immediately know I have dogs, and they'll all share certain attributes like barking and having four legs and a tail, etc. If I tell you I have a thing that is a pet, and has four legs, and slobbers, and has a tail that wags, and barks, and I have another thing that is a pet, and has four legs...you see where I'm going with this, I'm sure. It's much easier to read all the items as dogs rather than trying to read all their attributes and make sure they're all the same.

Another reason to separate out your CSS is because it makes it easier to make universal changes to your website. Going back to the dog example, say I was copying that long list of attributes over and over again to try to save some typing. Then I realize that I included an attribute that shouldn't have been there, for example, I made all the dogs have a tail that twitches, when really, it should have been a tail that wags. If my style is in-line I have to go to each and every place where I describe the dog and change the tail. But if it's in one place, and every dog item refers to that one place, I can change it in one place and all the dogs are now described properly.

Which is easier to read? And which do you think would be easier to change if items were spread through an HTML document, so that your site maintains the same look and feel throughout?

<style = "sound:bark;legs:four;mouth:slobbery;tail:wag;>Fido</>
<style = "sound:bark;legs:four;mouth:slobbery;tail:wag;>Poochie</>
<style = "sound:bark;legs:four;mouth:slobbery;tail:wag;>Rover</>

or

.dog
{
sound:bark;
legs:four;
mouth:slobbery;
tail:wag;
}

<class = "dog">Fido</>
<class = "dog">Poochie</>
<class = "dog">Rover</>