External CSS:-

The external style sheet is generally used when you want to make changes on multiple pages. It is ideal for this condition because it facilitates you to change the look of the entire web site by changing just one file.

It uses the <link> tag on every pages and the <link> tag should be put inside the head section.



Example:-

<head>  
<link rel="stylesheet" type="text/css" href="mystyle.css">  
</head>  


The external style sheet may be written in any text editor but must be saved with a .css extension. This file should not contain HTML elements.

Let's take an example of a style sheet file named "mystyle.css".

File: mystyle.css

body {  
    background-color: lightblue;  
}  
h1 {  
    color: navy;  
    margin-left: 20px;  
}  
p {

    margin-left: 20px;
    color: yellow;
} 


Note: You should not use a space between the property value and the unit. For example: It should be margin-left:20px not margin-left:20 px.

First write this below code in  any text Editor and save it with  .HTML Extension, and then write  the above code in the another file and save it with the .CSS Extension. before that  make a folder and save both file in that folder and then run.

CODE:-


<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>How to add CSS</h1>
<p>This is My first Code.</p>

</body>
</html>