There are three methods of applying CSS to a document.
Inline
Inline styles are CSS declarations that affect a single HTML element, contained within a style attribute.
Avoid using CSS in this way, when possible. It is the opposite of a best practice. First, it is the least efficient implementation of CSS for maintenance. One styling change might require multiple edits within a single web page. Second, inline CSS also mixes (CSS) presentational code with HTML and content, making everything more difficult to read and understand. Separating code and content makes maintenance easier for all who work on the website.
<div class="row">
<div class="col-3" style="color: red">
I am inline styled
</div>
</div>
Internal
An internal stylesheet resides within an HTML document. To create an internal stylesheet, you place CSS inside a <style> element contained inside the HTML <head>.
In some circumstances, internal stylesheets can be useful. For example, perhaps you're working with a content management system where you are blocked from modifying external CSS files. But for sites with more than one page, an internal stylesheet becomes a less efficient way of working. To apply uniform CSS styling to multiple pages using internal stylesheets, you must have an internal stylesheet in every web page that will use the styling. The efficiency penalty carries over to site maintenance too. With CSS in internal stylesheets, there is the risk that even one simple styling change may require edits to multiple web pages.
<style>
p {
color: green;
}
a {
color: blue;
}
</style>
<!-- Internal -->
<div class="row">
<div class="col-3">
<h4>Internal CSS</h4>
</div>
</div>
<div class="row">
<div class="col-3">
<p>I am internal styled</p>
</div>
</div>
External
An external stylesheet contains CSS in a separate file with a .css extension. This is the most common and useful method of bringing CSS to a document. You can link a single CSS file to multiple web pages, styling all of them with the same CSS stylesheet.
style.css
.note{
color: blue;
}
In the head section, include the external style sheet
<link rel="stylesheet" href="style.css">
<!-- External -->
<div class="row">
<div class="col-3">
<h4>External CSS</h4>
</div>
</div>
<div class="row">
<div class="col-3">
<p class="note">I am external styled</p>
</div>
</div>