Adding CSS into HTML can be confusing because there are 3 different ways to do it.
a) external CSS
b) internal CSS
c) inline CSS

a) External CSS
This technique allows you to define a style sheet as a separate document and import it into your website. With an external style sheet, you can change a look of an entire web page by changing just one file.
Each HTML page must include a reference to the external style sheet file inside the <link> element, inside the <head> section.
Example and output:

Here is how the “mystyle.css” file looks like:

An external style sheet can be written in any text editor and must be saved with a .css extension. The external style sheet file should not contain any HTML tags.
b) Internal CSS
An internal style sheet holds CSS rules for the web page in the <head> section of the HTML document. An internal style sheet can be used if one single HTML page has a unique style. The internal style is defined inside the <style> element, inside the <head> section.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: pink;
}
h1 {
color: green;
margin-left: 35px;
}
</style>
</head>
<body>
<h1>Heading- Internal style sheet.</h1>
<p>Paragraph- Internal style sheet.</p>
</body>
</html>
Output:

c) Inline styles
Inline-styles are related to a specific HTML tag, using a style attribute with a CSS rule to style specific page elements. They are useful for quick, permanent changes.
Example and output:

Enjoy coding!
Read also: