CSSとは

CSSとはCascading Style Sheet（カスケーディング・スタイル・シート）の略で、HTML文書やXML文書の表示方法を指定することができる言語のひとつです。

CSSを使うことによって各文書中のフォントや配置を統一して管理することができ、別々の文書に一貫性を持たせることが容易になり、一度に見た目を変更したりすることもできるようになります。

CSSの使い方としては、
1.外部のファイルにまとめて記述し、そのファイルを参照する（読み込む）
2.ページごとにHEADタグ内に記述する
3.各要素に直接STYLE属性を記述する

この3通りの方法があり、その中でも最も一般的で有用なものは、"1"の外部ファイルを参照する方法です。

その場合、CSSファイルは下の【ex-1】のように、
名前 { [属性名1]: [属性値1];
[属性名1]: [属性値2]; ･･･}
という形で属性名と属性値を「:（コロン）」で区切り、2つ以上の属性を付けるときには「；（セミコロン）」で切りながらどんどん記述していきます。（1行に続けて書いてもOK）

そして、HTML/XML文書は【ex-2】のようにhead要素にlink要素を加え、href属性でCSSファイルの置いてあるディレクトリを指定します。

---------  ファイル名"ex-1.css"  ---------
H1 { color: #6495ED;
     text-align: center;
     font-weight : bold;
     font-size:10pt }
p {  color:#A9A9A9;
     text-align: center;
     font-size : 8pt; }
----------------------------------------

---------  ファイル名"ex-2.html"  ---------
<html>
<head>
    <meta http-equiv="Content-Style-Type" Content="text/css">
    <link rel="stylesheet" href="ex-1.css" type="text/css">
</head>
<body>

<H1>"H"とは"Heading"の略でH1は一番重要な見出しを意味します。</H1>
<p>"P"とは"Paragraph"の略で段落を意味します。</p>

</body>
</html>
-----------------------------------------

上のファイルを実行したらこうなります→"CSSを使ったHTMLを見てみる"

HTMLというのはそもそも文章構造を記述するものであり、デザインや見栄えに関する記述をするものではありません。それがCSSを外部ファイルとして読み込ませることで、上記のソースのように、純粋に文章構造を表現することができ、かつシンプルな記述にすることができるのです。

上のHTMLはソースを見ただけでその文字列が何を意味するかわかりますよね？

by Wada