There are three places where you may write style rules:
style attributeEvery example you've seen so far has used an external stylesheet, in which the CSS is placed in a separate file and bound to an HTML document using the link tag, like this:
The advantages of external stylesheets are that your styles are written in a single file that can be bound to many HTML documents and that the file contains nothing but CSS, which brings some focus to your life.
A stylesheet can also be declared internal to the HTML file, in a style tag in the head element. Here an internal stylesheet is declared after linking the external stylesheet:
Notice how both stylesheets try to set the color of the paragraph elements. The stylesheet loaded last wins in the cascade. This is technically only true when the selectors are the same, as they are here. Someday you'll learn that the story is more complex. If you can't wait, investigate CSS specificity. The font size was not overridden by the internal stylesheet, so the external stylesheet's value is applied.
The advantage of an internal stylesheet is that the page is a single bundle of text, which makes it easier to pass around to others. An internal stylesheet can't be used in another document, however. Additionally, mixing two languages in a single document can trip up your text editor and even your own brain. To ease styling of multi-page sites, you should favor external stylesheets.
Lastly, properties can be set directly on an HTML element in its style attribute:
Since the browser knows exactly which element gets the style rules, there's no selector.
Styles defined in a style attribute are hard to read and can only be applied to a single element. They are sometimes useful when you are programmatically generating HTML that will not be maintained by a human.