CSS 文法

ウェブブラウザがスタイルシートを読み込むと、その情報に従ってHTMLドキュメントを書式設定します。

3つのCSSの挿入方法
複数のスタイルシート
- 例
カスケーディングオーダー

3つのCSSの挿入方法

CSSを挿入する方法には以下の3つがあります:

外部CSS

外部スタイルシートを使用すると、1つのファイルを変更するだけでウェブサイト全体の外観を変えることができます。


<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

外部スタイルシートは任意のテキストエディタで作成し、.css拡張子で保存します。ファイルにはHTMLタグは含めません。

内部CSS

1つのHTMLページだけに適用するスタイルを内部スタイルシートで定義することができます。


<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}

<h1> {
  color: maroon;
  margin-left: 40px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

インラインCSS

1つの要素に対して直接スタイルを適用するには、インラインスタイルを使用します。スタイル属性には任意のCSSプロパティを含めることができます。


<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>

インラインスタイルはスタイルシートの利点を失う可能性があるため、極力使用は控えるべきです。

複数のスタイルシート

同じセレクター（要素）に対して異なるスタイルが複数のスタイルシートで定義されている場合、最後に読み込まれたスタイルシートの値が使用されます。

例

外部スタイルシートで<h1>要素のスタイルが次のように定義されているとします:


h1 {
  color: navy;
}

その後、内部スタイルシートで同じ<h1>要素に別のスタイルが定義された場合:


<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
  color: orange;
}
</style>
</head>

内部スタイルシートが外部スタイルシートの後に定義されている場合、<h1>要素は「オレンジ」になります。

しかし、内部スタイルシートが外部スタイルシートの前に定義されている場合、<h1>要素は「ネイビー」になります:


<head>
<style>
h1 {
  color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

カスケーディングオーダー

HTML要素に複数のスタイルが指定されている場合、どのスタイルが適用されるでしょうか？全てのスタイルは以下の規則に従って新しい「仮想的な」スタイルシートに「カスケード」されます。優先順位が高い順に:

インラインスタイル（HTML要素内部）
外部および内部スタイルシート（headセクション内）
ブラウザのデフォルトスタイル

したがって、インラインスタイルが最も優先され、外部および内部スタイルシート、そしてブラウザのデフォルトスタイルよりも優先されます。