To keep things simple, this tutorial has so far used only internal style sheets. There are actually 3 ways to add style sheets to your HTML: external, internal, and inline. We've already seen the internal type (added with the <style> element inside the head element).
For the inline element, we simply add a style attribute to any HTML opening tag.
<html>
<head>
<title>My Title</title>
</head>
<body>
<h1>Main header</h1>
<p style="color:#651495;">Body text here.</p>
</body>
</html>
Inside the double quotes that give the attribute's value we can give all the CSS rules we like. Using this form is unusual, though, because it goes back to putting presentation rules inside HTML tags. that's the cumbersome to code and difficult to modify way of doing things we're hoping to avoid.
External style sheets give the true power of CSS. This lets us totally separate content from presentation. So, when you want to change your presentation, your precious content can be unaffected. To create an external style sheet, simply put all of your CSS rules in a plain text file and save it with a .css extension. Then, inside the HTML head element of any of your .html files, simply add a link element to reference your .css file.
<html>
<head>
<title>My Title</title>
<link href="./my_styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Main header</h1>
<p">Body text here.</p>
</body>
</html>
In the example code above we're referencing a .css file that happens to be in the same directory as this .html file. The file url that you give for your .css file inside of the href attribute is just like if you were giving the location for a <a> link.
The main power of using external style sheets instead of the internal style sheets we saw earlier is that an external style sheet can be reference by any number of .html files. So, if you create several webpages you can let them all have the same style using an external style sheet. If some parts still need to be unique, you can also link more than one external style sheet by simply adding more <link> tags inside the head element.