Internal or inline CSS is not written without the need, and should not be written. Because it takes a look at HTML files and becomes very big. So, putting all CSS rules together in a file, it can be saved with the .css extension name (like style.css) and connecting it to the HTML file. It’s called External CSS. There is a tag called HTML link and it can be connected with it. An example

<!DOCTYPE html>
 <html>
<head>
<link href="/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
 
 <h1>Hello world</h1>
 
 <p>demo content goes here.</p>
 
 </body>
 </html>

Here’s how to add style.css file with link tags instead of internal CSS. href is the attribute, to show where the source or where the file is located. Relative attribute is the relation between the HTML document and the CSS file (stylesheet) that is meant to the browser, it must be given. And the value of the type attribute is in text / css. It is a CSS file.

Save this file as index.html code of style.css

h1{
   color: #f00;
   background: yellow;
   text-align: center;
}

Write the code above and save the file as style.css. Then run index.html. All CSS effects have been there.

Professionally, everyone uses External CSS because the HTML code is required to write up to thousands of lines of CSS Rule. As a result, it was very difficult to separate the HTML and CSS files later and later the code maintenance was very easy.

** In most CSS tutorials we will use examples of using internal CSS as it will be useful to show us. But you will work using professional or real-time external CSS.