スタイルシート

CSSを外部ファイルにすると言うことは、

CSS部分を別ファイルに保存し、拡張子を.cssにすることです。
通常HTMLファイルから、link要素で読み込むことが出来ます。
または、CSSからさらに別のCSS外部ファイルを読み込ませる場合は
importを使います。

初心者の場合は、今まで通りHTMLに記載する方法で問題ありません。
SEO・管理のし易さに重点を置く中級者～上級者などが使います。
初心者が安易にこの方法を使うと、逆に分からなくなると思います。
質問者さんにあった方法を利用してみてください。
サイトページ数が510以上ある場合は、外部にした方が良いですね。

by、見習いウェブデザイナー

CSSの使いまわしが効くってことですね。

内部では全部のページにスタイルを書かなければならないですが、別ファイルならいろいろなページから参照できるから便利になりますよ。

「検索エンジンはhead内が小さい方が好き」こんな噂を読んだことはありませんかね。
そうするとスタイルがlinkの1行で済むことは魅力的？じゃないでしょうか。
それにstyle属性やプレゼンテーション属性で埋め尽くされたHTMLは読みにくいです。
そうするとstyle属性を無くすことができる方法は編集が楽になりますね。
構造も解り易くなりますからDOMを使って何かを参照するときも解り易くなります。

htmlで修飾する方法は大きく４つ。

１、タグにベタウチ
例）
これは<font color=red>赤い文字</font>です。
・・・これは古いやり方で、タグで文字を修飾するのは推奨されていません。

２、タグにスタイル属性を直接かく。
例）
これは<span style="color:red">赤い文字</span>です。
・・・こうすれば段落や行の一部に修飾することができます。

３、タグにclassやidを指定して、スタイルをわける。
例）
<style type="text/css">
.red{color:red}
</style>
これは<span class="red">赤い文字</span>です。
・・・こうすれば使い回しもきくのでなにかと便利

４、ファイルもわける
<link rel="stylesheet" tyle="text/css" href="hoge.css" />
これは<span class="red">赤い文字</span>です。

としておいて、hoge.cssに
.red{color:red}
とかいておけば、別のhtmlで同じような修飾が簡単に実現できる
のでさらに便利。（今回は色を変えるだけですが、もっと
複雑な修飾になるといちいちタグごとに書くのは面倒ですよね？）

今回のご質問は４番目のことで、一応もっとも推奨されている
やりかたです。