There are 3 ways of inserting CSS into an Html page.
  1. Inline  CSS
  2. Internal CSS and
  3. External CSS
Inline CSS
Inline CSS is used to insert a style sheet for only a single element. In an inline CSS, the style sheet affects only a single line or single element. The "style" attribute is used to define inline CSS.
Example: Inline CSS
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<h1 style="color: blue; font-size: 30px; width: 200px; border: 2px solid tomato;">Hello World!</h1>
</body>
</html>
Output 
  

Hello World!

Internal CSS
Internal CSS is used to apply CSS to a document or a page. It can affect anything on the page. Internal CSS is Added inside head sections of an HTML page with <style> tag. To select the elements that we want to style on an HTML page we use CSS selectors.
Example: Internal CSS
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		h1{
			color: blue; 
			font-size: 30px; 
			width: 200px; 
			border: 2px solid tomato;
		}
	</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
Output 
 

Hello World!

External CSS
External CSS is used to style multiple HTML pages by importing External CSS. The CSS document must be saved with the .css file extension separately from the Html document. The <link> tag is used to link or import external CSS documents.
Syntax
<link rel="stylesheet" type="text/css" href="css_document_name.css">
Example: External CSS
CSS document with the filename "style1.css"
h1{
	color: blue; 
	font-size: 30px; 
	width: 200px; 
	border: 2px solid tomato;
  }
Html document 
<!DOCTYPE html>
<html>
<head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
Output

Hello World!



Watch on You Tube