headの中で、外部にあるスタイルのファイルを指定する

スタイルだけ記述した別ファイルを用意しておいて、HTMLファイルでそのスタイルファイルの取り込みを指示し、そのスタイルファイルの飾りへ反映させることができます。
これにより、見せたい目的のための文章などをHTMLファイルに書く担当と、それを飾るデザインのスタイルファイルを書く担当に分業することが可能になります。
またスタイルファイルの差し替えで、同じ意味の内容を簡単に別の飾りの表現に変更することも可能となります。
このスタイル専用の記述ファイルは、 .cssの拡張子のファイルでHTML同様にメモ帳などで作ることができます。そしてそのスタイルファイルの取り込み指示はheadの中で、 linkタグのhref属性で指定します。（linkタグは外部リソースを参照する時に使うもので、別途にリソースの種類を指定するrel属性に "stylesheet"の属性値を設定する必要があります）
以下で具体例を示します。

以下の内容のファイル『warm.css』を、htmlのファイルがある場所と同じディレクトリに用意します。

body { 
 background-color: #FFCCCC; 
}

p, h3 {
 color: #FF33FF;
 line-height: 1.5em;
}

b.W { background-color: white; }
b.G { background-color: #DDDDDD; }

そして、以下の内容のファイル『cool.css』も同様に同じディレクトリに用意します。

body { 
 background-color: #99CCFF; 
}

p, h3 {
 color: #6600CC;
 line-height: 1em;
}

b.W { background-color: white; }
b.G { background-color: #DDDDDD; }

head の中で　<link rel="stylesheet" href="warm.css" type="text/css">　と指定すれば、 warm.cssのスタイルが適用され、<link rel="stylesheet" href="cool.css" type="text/css">　と指定すれば、 cool.cssのスタイルが適用されます。
同じbody内容で、warm.cssを適用した例がで確認でき、
cool.cssを適用した例がで確認できます。
このHTMLを以下に示します。

<html><head>	<title> フォントの種類　</title>
<link rel="stylesheet" href="ここに外部のスタイルファイルを指定" type="text/css">
<style type="text/css">
	span { font-size: x-large; }
	span.C { font-family: serif; }
	span.M { font-family: monospace; }
</style>
</head>
<body>
 <h3>フォントの種類</h3>
 <p> <span class="C">学</span> <b class="W">serif</b>の<b class="G">フォント</b>です。</p>
 <p> <span class="M">学</span> <b class="W">monospace</b>の<b class="G">フォント</b>です。</p>
</body>
</html>

linkタグ実験用の問題

ここでは、上記で示した外部スタールシートの warm.css と cool.css のファイルが、作成しているHTMLと同じ位置にあるという前提で、これらスタイルシートのファイル内で付けられたクラス名を利用するように変更します。また、ここでは文字を装飾するプロパティのtext-decorationに関する説明があり、その確認ができるようになっています。それらがブラウザにどう反映するかも注目してください。