The styling (CSS) for an HTML document can be linked in three different ways. External is usually the best practice for organization and to limit the length of the document.
Internal
The CSS styling is added into the head section of the HTML document.
<head>
<style>
<! -- CSS Code here -->
</style>
</head>
External
The CSS styling is contained in another document, which is connected by a link in the HTML head section.
<head>
<link rel= "stylesheet" src= "styles.css">
</head>
Inline
The CSS styling is used inline with the HTML code.
<p style= "color: red; font-size: 20px;> Some text </p>
Keeping all of the content separate may not seem necessary for a small project, but it is a good habit to get into. When you work on larger projects, keeping things organized can help you keep track of where things are and allow for easier navigation.