これまでいくつか説明したように、htmlには実にさまざまな要素（タグ）があります。
例えば今までちょこっとだしましたが、文字のサイズや色などを変えるためのfont要素、 太字にするためのb要素、斜体にするためのi要素…。
これらに共通するのは、全て目に訴える、見た目だけを変えるための要素だということです。
が、html文書本体に見た目に関する要素、タグを書くことは、実はおすすめできる方法ではないのです。
ではいったいどうすればいいのでしょうか。
みなさんが文章を書いていて、特定の部分の文字の色やサイズを変えたり、太字にしたくなるのはどんなときでしょうか。 大体はその部分を強調したいときではないでしょうか。
font要素、b要素など、見た目を飾るための要素に対して、em要素、strong要素は単に強調する、より強調するという 役割だけで、どういう風に強調するのかは決まっていません。
ただ単にem要素、strong要素を書いただけでは、一般的に使われているブラウザでは em要素はi要素のように斜めになって見え、strong要素はb要素のように太字になって見えるだけです。
ですが、このサイトでは特別な設定をしない限り、em要素は太字、strong要素はトマトっぽい色の太字 で表示されます。なぜこういうことができるのかというと、htmlとは別の「CSS」というファイルに、 「em要素は太字にしてね」「strong要素はトマトっぽい色の太字にしてね」という特別な文を書いているからです。
CSSは「スタイルシート」というものの一種で、 スタイルシートを使えば、デザインに関する部分をhtml文書本体と切り離すことができるのです。
上でも書きましたが、本当はCSS＝スタイルートではなく、 あくまでもCSSはスタイルシートの一種なのですが、このサイトで使われている「スタイルシート」という単語は、そのCSSを指していると思ってください。
デザインをhtml文書本体と切り離すと書いても、ピンと来ない方がほとんど だと思います。
普通、一ページだけのホームページってありませんよね。複数のページがあるはずです。 さらに、それぞれのページが全く違うデザインをしているということはなく、共通した部分があることが 多いと思います。
例えば、このサイトでは背景の画像、タイトル部分の背景色がほとんどのページで共通しています。
もし背景の画像や色を変えたいとき、body要素で背景の画像を指定していた 場合、わざわざすべてのhtmlファイルを一つ一つ開いて変えなければなりません。
ですが、デザインをhtmlと切り離してCSSに書けば、CSSファイルをいじるだけで、そのCSSファイルに リンクしているすべてのhtmlファイルのデザインを変えることができるのです。
例えば背景を黒にしたいなら、
body {
background-color: #00000;
}
と書いて作ったcssファイルにすべてのhtmlファイルからリンクすれば、それだけで全てのhtmlファイルの背景を黒にすることができます。
もちろん背景色だけではなく、他の部分も同じように変えることができます。
このように、CSSを使うと、サイト全体のデザインの変更が非常に楽になります。