HTML <style>タグ

例

<html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>

<h1>A heading</h1>
<p>A paragraph.</p>

</body>
</html>

以下の「自分で試してみてください」の例をもっと見てください。

定義と使用法

<style>タグは、ドキュメントのスタイル情報（CSS）を定義するために使用されます。

要素内<style>で、ブラウザでのHTML要素のレンダリング方法を指定します。

ヒントと注意

注：ブラウザーがスタイルシートを読み取ると、スタイルシートの情報に従ってHTMLドキュメントがフォーマットされます。異なるスタイルシートの同じセレクター（要素）にいくつかのプロパティが定義されている場合は、最後に読み取られたスタイルシートの値が使用されます（以下の例を参照）。

ヒント：外部スタイルシートにリンクするには、<link>タグを使用します。

ヒント：スタイルシートの詳細については、 CSSチュートリアルをお読みください。

ブラウザのサポート

Element
<style>	Yes	Yes	Yes	Yes	Yes

属性

Attribute	Value	Description
media	media_query	Specifies what media/device the media resource is optimized for
type	text/css	Specifies the media type of the <style> tag

グローバル属性

この<style>タグは、HTMLのグローバル属性もサポートしています。

イベント属性

この<style>タグは、HTMLのイベント属性もサポートしています。

その他の例

例

同じ要素の複数のスタイル：

<html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
<style>
h1 {color:green;}
p {color:pink;}
</style>
</head>
<body>

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

</body>
</html>

デフォルトのCSS設定

ほとんどのブラウザは<style>、次のデフォルト値で要素を表示します。

style {
display: none;
}

❮前へ完全なHTMLリファレンス次へ❯

HTMLリファレンス

HTML Tags