Why is my external style sheet not working? : <p>This is my html below-</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;link rel="stylesheet" type="text/css" href="style.css"&gt; - as you can see I refer to the external style sheet.
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="UFT-8"&gt;
&lt;meta name ="viewport" content="width=device-width,initial-scale=1.0"&gt;
&lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
&lt;title&gt;Natours&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;header class ="header"&gt;
This is some cool text...
&lt;/header&gt;
&lt;/body&gt;
&lt;style type="text/css"&gt;
*{margin:0;
padding:0;}    


&lt;/style&gt;
&lt;/html&gt;
</code></pre>

<p>I save the Html file as HTML, and save the CSS file as a CSS file, but after I click to save the external stylesheet as a CSS file, and click save, I go back to the file but its still set as a neutral file, not a CSS file.</p>

<p>-Below is my CSS-
body{background-color:black;}</p>

<p>I've tried multiple times to use the forums, but many people say that I'm using it correctly.</p>
