CSSとは、『HTMLで構造化された要素を装飾するもの』ですね。
ここ数回の解説で、扱えるプロパティの種類も少しずつですが増えてきました。
まだまだ学習は序盤の序盤ではありますが、ちょうどこれぐらいのタイミングで、ある1つの疑問が浮かんできます。
『CSSに指定した覚えが無いのに反映されているスタイル（装飾）はナニ？ナゼ？』
と、皆さんは考えたことはありませんか？
こちら（制作者）から指定していなくとも最初から表示結果に反映されているスタイルのことを
『デフォルトスタイルシート』と呼びます。
要素ごとのプロパティの初期値
指定した覚えがないのに
- なぜ文字の色は黒なのか
- なぜ背景色は白いのか
- なぜh1要素の文字サイズとp要素の文字サイズは異なるのか
- なぜ書体はゴシック体（あるいは明朝体）なのか
などなど、
本来は制作者がCSSを記述することによって様々な要素の『色や形、大きさ、種類など』が指定されていくはずなのに、こちらから指定する前にあらかじめ決まっているスタイルがありますよね。
それらはどこでどのように決められているのでしょうか。
この、あらかじめ決まっているスタイルは『デフォルトスタイルシート』というCSSに記述されており『ウェブブラウザー』自身が保持しています。
つまり『ブラウザーに与えられているCSS』のことなんですね。
ウェブブラウザーにあらかじめ与えられているCSS
要素の文字の色や大きさ、背景の色、配置など全てのプロパティについて『初期値』が指定されている
制作者は、その『初期値』を自身が記述するCSSで『上書き』することで独自のデザインを構築していく
初期値・・・
ブラウザーでの表示をひとまず進めるための仮の値
みたいなものですね。
想像してみてください。
もしブラウザーが『文字の色や大きさ、書体など、全てを制作者が指定しない限り何も表示されない』仕組みだったとしたら？
ひとまずHTMLに文書構造を構築しようとしても、その前にあらゆる要素に対して文字のサイズや色や書体をひと通り指定しなければなりません。
あらゆるスタイルを全て制作者が指定しなければならないとなると、それだけ作業数は多くなります。
当然ながら作業がうまく運ばなかったときの『不確定要素』も多岐にわたり、原因が何であるかを特定するのに時間がかかってしまいます。
これではホームページ作成の敷居が高くなってしまいますよね。
加えてホームページ作成に関わる人々の間に『標準のルール』とでも言うべきものを設けておけば、それを『技術の基準』としてルールの周知にも役立つでしょう。
学習を始めたばかりの人にとっても、何かを記述すれば『初期設定に従ってとりあえず』表示される仕組み（デフォルトスタイルシート）が用意されているのはありがたいことなんですね。
・・・たしかに。
何から何まで全部自分で設定するなんて、考えただけでもたいへんそうですね。
「なんでこんな設定なの？」って思う時もありますけど、デフォルトスタイルシートのおかげで助かっている部分もあるんですね。
制作者が作るCSSはデフォルトスタイルシートよりも優先される
要素ごとに一通りのプロパティが与えらえてはいるものの、その効力は極めて弱く、制作者が容易に書き換えられるようになっています。
ただし『書き換える』とはいってもデフォルトスタイルシートそのものにアクセスしてその中身を書き換えるということではありません。
制作者がCSSを作成していけば、おのずとそのスタイルが『デフォルトスタイルシート』よりも優先される仕組みなのです。
デフォルトスタイルシート（初期値）
p{
color:rgb(0,0,0);
font-size:16px;
}
上記コードはデフォルトスタイルシートに設定されているものです。
（例は『文字色が黒』『文字の大きさ（font-size）が16px』）
これを『直接』書き換えることはできませんが、制作者は自身が作成しているCSSに別の値を記述することによってデフォルトスタイルシートよりも優先されるスタイルを上書きすることができます。
制作者独自のCSS（こちらが優先される）
p{
color:blue;
}
この記述により文字の色は青（blue）に上書きされます。
文字の大きさについてはこちらには記述していない（書き換えようとしていない）ので、デフォルトスタイルシートに書かれている『font-size:16px;』が引き続き反映されます。
デフォルトスタイルシートの例
ではここで、デフォルトスタイルシートの例を挙げてみます。
文字に関するデフォルトスタイルシート（例）
- 文字色は黒
- リンク（クリックしてページを移動する仕組み）を設定した文字の色は青
- リンクを設定した文字には下線が付く
- 標準の文字（p要素）の文字の大きさは概ね16px
など。
要素の外形に関するデフォルトスタイルシート （例）
- h1要素やp要素の幅は、内容（文字列など）の量に関係なく『親要素の幅と同じ』
- h1要素やp要素の高さは、そこに含まれる内容の量に合わせて伸縮する
- h1要素やp要素の上下には間隔（margin）が入る
- 全ての要素の背景色は『完全な透明』（白はブラウザーのベースカラーが見えているだけ）
など。
『デフォルトスタイルシートはウェブブラウザにあらかじめ与えられているCSS』
『製作者が記述するCSSはデフォルトスタイルシートよりも優先される』
今回はデフォルトスタイルシートについて解説しました。
それ自体を無効にすることはできませんので、一旦受け入れて上手に付き合っていく必要があります。
逆に初期設定のままでよいところはそのまま利用すればいいので便利に使うこともできますね。
最後までお読みくださりありがとうございました。
おつかれさまでした。
