インラインスタイルは、（プレゼンテーションとコンテンツをミックスしてしまうので）スタイルシートの多くの利点が失われます。 この方法は、使用し過ぎないようにしてください!
文書は、ブラウザにスタイルシートが読み込まれた時に、その情報に従ってフォーマットされます。
スタイルシートを挿入するには3つの方法があります:
外部のスタイルシートを使用すれば、1 ファイルを変更するだけで全ウェブサイトの外観を変更することができます！
各ページは、<link> 要素内に外部スタイルシートファイルへの参照を指定する必要があります。 <link> タグは head セクション内に置きます:
外部スタイルシートは、どのようなテキストエディタを使用しても記述できます。 ファイルには、あらゆる html タグを含めることはできません。。 スタイルシートは、拡張子 .css で保存しなければなりません。
"myStyle.css" というスタイルシートファイルの例を以下に示します：
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
プロパティ値と単位の間にスペースを入れないでください（例えば、margin-left:20 px;）。
正しくは、margin-left:20px; です。
1 つの文書にユニークなスタイルを設定する場合には、内部スタイルシートを使います。
内部スタイルは、HTML ページの head セクション内の <style> 要素内部に定義します:
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
Try it Yourself ❯
インラインスタイルは、1つの要素に固有のスタイルを適用するために使用することができます。
インラインスタイルを使うためには、関連するタグに style 属性を追加します。 style 属性には、全ての CSS プロパティを指定することが出来ます。
次の例は、<h1> 要素の色と左マージンを変更する方法を示しています:
|
インラインスタイルは、（プレゼンテーションとコンテンツをミックスしてしまうので）スタイルシートの多くの利点が失われます。 この方法は、使用し過ぎないようにしてください! |
|---|
あるプロパティが、別々なスタイルシートにおける同じセレクタ（要素）によって定義されている場合、
外部スタイルシートが、<h1> 要素に対して以下のプロパティを持っていたとします:
h1
{
color: navy;
}その次に、内部スタイルシートが、<h1> 要素に対して以下のプロパティを持っていたとします:
h1
{
color: orange;
}内部スタイルシートが、外部スタイルシートへのリンクの後に定義されている場合、<h1> は "orange" になります：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
Try it Yourself ❯
しかし、内部スタイルシートが、外部スタイルシートへのリンクの前に定義されている場合、<h1> は "navy" になります：
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Try it Yourself ❯
HTML要素に、複数のスタイルが指定されている場合、どのスタイルが適用されるでしょうか?
一般的に言って、全てのスタイルは、1番目が最も高いプライオリティを持つ次のルールによって、 新しい"バーチャル"なスタイルシートに"カスケード"されると言うことができます:
従って、インラインスタイル（特定な HTML 要素内）が、最も高いプライオリティを持っています。 これは、<head>タグの中や、外部のスタイルシート、またはブラウザ(デフォルト値) で定義されたスタイルを上書きすることを意味しています。
Exercise 1 ❯ Exercise 2 ❯ Exercise 3 ❯ Exercise 4 ❯