CSS とは?
CSS は、HTMLで記述された文書に対して「どのHTMLタグをどのような見た目にするか?」を指定するためのスタイルシート言語です(これはかなり簡略した説明です)。実際には、HTMLのタグ名だけでなく、タグの属性に対しても装飾を指定することができます。
HTMLによって文書の各要素に「意味・構造」を持たせた上で、その要素に対して「見た目」を指定するのが CSSです。HTMLとCSSで役割を分担することにより、メンテナンスがラクになります。
そして、HTML とは? でも説明していますが、HTMLのタグと CSSの記述の両方を読み込んで、HTML文書に CSSの内容を反映してくれるのが「Webブラウザ」と呼ばれるアプリケーションです。具体的には、Chrome, Firefox, Edge, IE などがあります。これらのアプリケーションは、インターネット上から目的のWebページを閲覧する時に使用しますが、Webページを表示する度にこのような処理を行っているのです。

(実際には画像ファイルやJavaScriptファイルなどもあります。)
CSS の例
例えば、箇条書きしたいところをHTMLで以下のように書いたとします。
<ul class="foo">
<li>晴れ</li>
<li>曇り</li>
<li>雨</li>
</ul>
これをこの画面にそのまま記述すると、以下のように表示されます。
—– ここから —–
- 晴れ
- 曇り
- 雨
—– ここまで —–
では、以下のようなCSSを記述した場合はどうでしょうか?
(ここでは詳しく説明しませんが、class属性に”foo”が指定された ul要素に対して見た目の定義を行っています)
ul.foo {
list-style: none;
}
ul.foo {
margin: 20px 0;
padding: 1em 1em 1em 2em;
background-color: #f9f9f9;
border: solid 1px #eaeaea;
}
ul.foo > li:before {
content: "●";
color: orange;
font-size: 50%;
position: relative;
bottom: 0.3em;
right: 0.7em;
}
画像で申し訳ないのですが、以下のような表示になります。
このように、HTMLを変更することなく、CSSの指定だけで見た目を変えることができます。
CSS の仕様
CSS の仕様書はとてもたくさんあります。というのも、CSS には多くの機能があり、機能によって仕様書が分かれているからです。
以下のページで仕様書を一覧することができますが、いくつあるのかよく分からないくらいあります。
詳しく知りたい方は、以下の文書から読むことをお勧めします。