共通的なことは別ファイルとして記述して、HTMLのヘッダ部に、次のように記述して取り込む。
下の例ではここで適用対象となる media（詳細は後述）を指定している。 上の例ではここでは media を指定せず、cssファイル(mh01.css)の中で指定している。
<link REL="stylesheet" type="text/css" HREF="../mh01.css"> <link REL="stylesheet" type="text/css" HREF="../all.css" media="all">
このファイルにだけ適用する場合には、次に示すように直接ヘッダ部に記述する。
前後をHTMLのコメントとして <!-- --> で囲むのは CSS に対応していない古いブラウザに対するもので、
実際上、そのような古いブラウザはほとんど使われていないと思われるので、<!-- --> で囲むのは省略してもよい。
<head>
<style type="text/css">
body { font-size: 14pt; font-family: consolas, "ＭＳ 明朝"; font-weight: normal; }
</style>
</head>
別ファイルも取り込んでいた場合、上のようにして定義した内容が優先される。
例えば、
<body style="font-size: 14pt;"> のように style="..." として個々のタグに記述することもできる。
適用範囲はこのタグの終了タグまでとなる。優先順位は、これが最高である。
この場合、ヘッダ部に次の記述を入れ、style属性がCSSによることを明示したほうがよい。 無くてもブラウザがそう判断するが。
<meta name="Content-Style-Type" content="text/css">
CSSでのコメントは /* … */ のみ。// コメントは使えない。
line-heightプロパティをbodyに設定すると、行間が固定され、 h2タグやpタグで微細な上下のマージンが設定できなくなる。
marginプロパティは、上下左右のマージン(領域間のスペース)をまとめて指定する際に使用します。
上下左右を異なるマージン幅にしたい場合には、スペースで区切って複数の値を指定します。
値を1つ指定した場合： 指定した値が[上下左右]のマージン
値を2つ指定した場合： 記述した順に[上下][左右]のマージン
値を3つ指定した場合： 記述した順に[上][左右][下]のマージン
値を4つ指定した場合： 記述した順に[上][右][下][左]のマージン
paddingプロパティは、上下左右のパディング(領域内のスペース)をまとめて指定する際に使用します。
上下左右を異なるパディング幅にしたい場合には、スペースで区切って複数の値を指定します。
値を1つ指定した場合： 指定した値が[上下左右]のパディング
値を2つ指定した場合： 記述した順に[上下][左右]のパディング
値を3つ指定した場合： 記述した順に[上][左右][下]のパディング
値を4つ指定した場合： 記述した順に[上][右][下][左]のパディング
widthプロパティは、 <TABLE>・ <TD>・ <IMG>・ <TEXTAREA>などの領域の幅を指定する際に使用する。 指定方法には、実数値にpxなどの単位をつける方法と、親ボックスに対する割合を％で指定する方法と、 状況に応じて大きさが設定されるautoを指定する方法がある。
CCS2で定義されているメディアタイプを下に示す。
| screen | パソコンのスクリーン |
|---|---|
| tty | 文字幅が固定の機器 |
| tv | テレビ |
| projection | プロジェクタ |
| handheld | 携帯機器 |
| プリンタ | |
| braille | 点字ディスプレイ |
| embossed | 点字プリンタ（※CSS2より追加、HTML4.01の仕様には無い値） |
| aural | 音声出力（※CSS 2.1では「aural」は非推奨、新たに「speech」が追加予定） |
| all | すべてのメディア |
例えば、一部の印刷書式のみ変更するには、次のようにする。
<link REL="stylesheet" type="text/css" HREF="../all.css" media="all"> <link REL="stylesheet" type="text/css" HREF="../print.css" media="print">
次のように @media を用いれば 一つのスタイルシートに、複数のメディアタイプに対する規則を記述できる。
@media print {
/* 紙媒体向けスタイル定義 */
body { font: 10pt serif }
}
@media screen {
/* スクリーン向けスタイル定義 */
body { font: 12pt sans-serif }
}