How to add CSS

CSS is added to HTML pages to format the document according to information in the style sheet. There are three ways to insert CSS in HTML documents.

Inline CSS

This type of style is used to apply the unique style rules to an element by putting the CSS rules directly into the tag attribute. It can be attached to an element using the style attribute.

The style attribute includes a series of CSS properties and value pairs. Each “property: value” pair is separated by a semicolon (;), just as we would write into an embedded or external style sheet. But it needs to be all at one line i.e. no line break after the semicolon, as shown here:

<!DOCTYPE html>
<html>
   <head>
       <title>This is my document title</title>
   </head>
   <body>
      <p style="color: #333333;">Hello CSS</p> 
   </body>
</html>

Internal CSS

This type of style is used to apply CSS on a single document or page. It can affect all the elements of the page. It is written inside the style tag within head section of html.

<!DOCTYPE html>
<html>
   <head>
       <title>This is my document title</title>
	     <style>  
         p{
           color: #333333;
		}  
      </style>  
   </head>	
   <body>
		<p>Hello CSS</p>
   </body>
</html>

External CSS

This type of style is used to apply CSS on multiple pages or all pages. Here, we write all the CSS code in a css file. Its extension must be .css

Index.html:- 

<!DOCTYPE html>
<html>
   <head>
       <title>This is my document title</title> 
	     <link rel="stylesheet" type="text/css" href="style.css">  
   </head>	
   <body>
		<p>Hello CSS</p>
   </body>
</html>

Style.css:- 

p{
  color: #333333;
}