本題に入る前になぜ、HTMLファイルとCSSファイルを分けるのか。
CSSファイルを外部に作るメリット
有名会社のウェブサイトをみると、会社のトップページ以外にも
複数のHTMLファイルからできているのが分かります。
CSSファイルを外部に作成してそれぞれのページから
読み込むことで、サイト内すべてのスタイルを統一させることが
できます。
HTMLファイルには複数のCSSファイルを読み込むことができます。
なので、「サイト全体のページスタイル」と「トップページ専用」の
CSSファイルを読み込むことで、量があるサイトでも管理がしやすく
なります。
CSSファイルを外部に作成する。
HTMLファイルとは別にCSS専用のファイル「.css」と
拡張子をつけて作ります。このファイルをHTMLファイル内で
<head>タグ内の<link>タグを使って読み込むことができ
CSSファイル内で書いたスタイルを反映できるようになります。
例１
<link rel="stylesheets" href="style.css">
例２
<link rel="stylesheets" href="css/style.css">
例１は、HTMLとCSSファイルが同じフォルダ内に入っている場合に
指定する場合です。
例２は、HTMLファイルが入っているフォルダ以内にcssフォルダを設け
そのなかにstyle.cssが入っている場合はこのように書きます。