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タグ実験用の問題

まず目標の確認ボタンをクリックして左上に目標となるページを出します。
そして下の編集後の確認ボタンをクリックして左下に現状のページを出します。
　　（出題しているこのページは、右に配置して、３つのウインドウが同時に見えるようにするとよいでしょう。）
そして、違いを確認しましょう。それから下記テキストを編集して編集後の確認ボタンで現状のページがどう変わったか確認します。いろいろと実験して最終的に、目標となるページと現状のページが同じになるように編集と確認を繰り返します。

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


←上記で編集した内容を、ブラウザで確認するボタンです
上のボタンで確認した後、正しいと思ったら、下の評価ボタンをクリックください。

←目標と同じ結果が得られるように修正してからクリックください。（下の枠に出たメッセージの⇒をクリックすると、違うと判断される近辺の行が反転します）
←作り方はいろいろですが、わからない場合や正解しない場合は、答えを見て出題されるパターンを学習し、再度チャレンジしてください。