CSSの書き方

CSSの書き方には、以下のものがあります。

基本的な書き方

CSSは、「セレクタ」「プロパティ」「値」の3つを組み合わせて定義していきます。

　セレクタ { プロパティ:値; }

セレクタとは、どの要素に対してスタイルを適用させるのかを指定する部分です。
セレクタでスタイルの適用対象を指定し、それに続く「{」～「}」の中に適用させたいスタイルを記述します。
プロパティとは、セレクタで指定した要素に適用するスタイルの種類を指定する部分です。
フォントの大きさを指定する「font-size」や、色を指定する「color」などがこれにあたります。
それに続けて、「:」(コロン)と値を記述することで、スタイルを設定します。

一番最後の「;」(「}」の直前の「;」)は省略することができますが、後からスタイルを追加したりするときなどに書き忘れる可能性があるので、普段から最後の「;」はつけておいたほうがいいと思います。
(私も書き忘れて…どうして変わらないの?と思ったことが幾度もあります(汗))

では、下の例で解説してみます。

　マウス　

もっとも一般的なコンピュータ用ポインティングデバイス。ねずみに形状が似ていたからこう呼ばれるようになったといわれています。さまざまな形状のものがありますが、一般的には裏側に付けられているボールを転がしてカーソルを移動します。

これを、HTML文書で見てみると、以下のようになります。

<HTML>
<STYLE>
H3 { color:red }
</STYLE>
<H3 align="right">マウス</H3>
<P>
もっとも一般的なコンピュータ用ポインティングデバイス。ねずみに形状が似ていたからこう呼ばれるようになったといわれています。さまざまな形状のものがありますが、一般的には裏側に付けられているボールを転がしてカーソルを移動します。
</P>
</HTML>

この例では、H3{color:red}　がCSSの設定部分となり、<STYLE> ～ </STYLE>の範囲に記述します。
そして、セレクタは<H3>タグ、プロパティはcolor、値はredとなり、「H3タグの範囲の文字を赤にする」という指定になります。

複数のスタイルをまとめて指定する方法

複数のスタイルを指定する場合、以下の2種類の方法があります。
どちらも意味は同じですが、スタイルを区切っている「;」を忘れずに指定します。

※　続けて書く場合

H1 {font-size:9pt; font-family:"MS UI Gothic"; color:#999999; }

※　縦書きに書く場合

H1 {
font-size:9pt;
font-family: "MS UI Gothic";
color:#999999;
}

複数のセレクタをまとめて指定する方法

複数のセレクタを指定する場合、セレクタ名を「,」(カンマ)で区切って指定します。

H1,H2 {
font-size:9pt;
font-family: "MS UI Gothic";
color:#999999;
}

コメントを入れる

<STYLE> ～ </STYLE>の範囲にCSSを記述する場合は、全体をコメント(  )にします。
これは、StyleSheetに未対応のブラウザがCSSのソースをテキストとして表示してしまうことを避けるためです。

<HTML>
<STYLE>

</STYLE>
<H3 align="right">マウス</H3>
<P>
もっとも一般的なコンピュータ用ポインティングデバイス。ねずみに形状が似ていたからこう呼ばれるようになったといわれています。さまざまな形状のものがありますが、一般的には裏側に付けられているボールを転がしてカーソルを移動します。
</P>
</HTML>

CSSのプロパティは大文字小文字を区別しません。
値のほとんども大文字小文字を区別しません。
しかし、ファイル名、フォント名、URLなどは大文字小文字を区別し、違う場合は指定が無効になるので、注意しましょう。