CSSについて

HTMLは文章を構造化して記述しますが、CSS（Cascading Style Sheet）は文章の見た目を記述します。
CSSは文字のサイズや色、配置などを指定してデザインすることができます。
例えばパソコンのディスプレイ用にHTMLを作っても画面の小さいスマートフォンでは閲覧するには不便です。そこでスマートフォン用のCSSを導入するとスマートフォンでも見やすいレイアウトの見た目のページが表示されます。逆にスマートフォン用のHTMLにパソコン用のCSSを導入してデザインを凝らしたパソコン向けのページにすることもできます。



CSSはCascading Style Sheetの略称ですがCascadingとは滝が流れ落ちる等の意味です。つまりCSSでスタイルを指定するとその要素を構成する下位の要素にも引き継がれていくということです。
例として

<div style="color:blue">
<p>ああああああ</p>
<p style="font-size:24px;">あああ<span style="color:green;">あああ</span></p>
<p style="color:red;">ああああああ</p>
</div>

このようなHTMLはこのように表示されます

ああああああ

ああああああ

ああああああ

これは上位の要素として<div>タグで全体をまとめています。そして下位の三つの<p>要素は上位の<div>タグで指定した"color:blue"の色が指定されます。これがCascadingです。
しかしそれぞれの要素でさらにCSSを指定することでそれぞれのスタイルを指定することができます。

一つ目の<p>要素はそのまま<div>タグで指定した"color:blue"を引き継ぎます
二つ目の<p>要素は<div>タグで指定した"color:blue"を引き継ぎながらさらに"font-size:24px;"を指定しています。さらに<p>要素内に<span>を下位の要素としていますが、ここでは二つ目の<p>要素の"font-size:24px;"を引き継いで"color:blue"から"color:green;"にスタイルを変更しています。
三つ目の<p>要素は二つ目の<p>要素の下位の要素ではないので"font-size:24px;"は引き継ぎません。そして<div>タグで指定した"color:blue"から"color:red;"へスタイルを変えています。

ここで<div>タグと<span>タグを用いましたがどちらも囲んだ部分をひとまとまりの範囲として指定するタグです。
<div>タグは複数の見出しや段落をまとめるブロック要素であり、<span>タグは段落中の文章の一部をまとめるインライン要素となっています。