CSSの作成方法

スタイルシートのインサート方法

スタイルシートを読み込んだとき、ブラウザはそれに基づいて HTML ドキュメントをフォーマットします。スタイルシートをインサートする方法は3種類あります：

外部スタイルシート

スタイルが多くのページに適用される必要がある場合、外部スタイルシートが理想的です。外部スタイルシートを使用する場合、1つのファイルを変更することで、サイト全体の外観を変更できます。各ページは <link> タグを使用してスタイルシートにリンクします。<link> タグは（ドキュメントの）ヘッダーに配置されます：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

ブラウザは mystyle.css ファイルからスタイル宣言を読み取り、それに基づいてドキュメントをフォーマットします。

外部スタイルシートはどんなテキストエディタでも編集できます。ファイルにはどんな HTML タグも含まれていない必要があります。スタイルシートは .css エクステンションで保存する必要があります。以下は、スタイルシートファイルの例です：

hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}

属性値と単位の間にスペースを入れないでください。例えば、「margin-left: 20 px」ではなく「margin-left: 20px」を使用すると、IE 6 では有効ですが、Mozilla/FirefoxやNetscapeでは正常に動作しません。

内部スタイルシート

単一のドキュメントに特別なスタイルが必要な場合は、内部スタイルシートを使用するべきです。あなたは、ドキュメントのヘッダーに <style> タグを使用して内部スタイルシートを定義できます。以下のようにします：

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

インラインスタイル

表示と内容を混在させるために、インラインスタイルはスタイルシートの多くの利点を失ってしまいます。この方法は、スタイルが一度だけ要素に適用される場合など、慎重に使用してください。

インラインスタイルを使用するには、関連するタグ内にスタイル（style）属性を使用する必要があります。スタイル属性は、どんな CSS 属性も含むことができます。この例では、段落の色と左外側マージンを変更する方法を示しています：

<p> style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

多重スタイル

同じ選択子が異なるスタイルシートで定義されている場合、属性値はより具体的なスタイルシートから継承されます。

例えば、外部スタイルシートには h3 選択子に対する3つの属性があります：

h3 {
  color: red;
  text-align: left;
  font-size: 8pt;
  }

内部スタイルシートには h3 選択子に対する2つの属性があります：

h3 {
  text-align: right; 
  font-size: 20pt;
  }

内部スタイルシートを持つこのページが外部スタイルシートとリンクされている場合、h3 が得るスタイルは以下の通りです：

color: red; 
text-align: right; 
font-size: 20pt;

文字色属性は外部スタイルシートで継承され、テキスト配置（text-alignment）とフォントサイズ（font-size）は内部スタイルシートのルールで置き換えられます。