<style>タグは、CSS（Cascading Style Sheets）のソースを文書に埋め込む際に使用します。
style要素で文書内にCSSソースを直接記述することで、文書単位でスタイルを指定することができます。
以下のサンプルは、典型的なstyle要素の使用例です。
style要素は、通常は<head>～</head>の中に配置します。
<style>～</style>の中には、CSSを記述します。
この使用例では、style要素を使用して、
cite要素、
em要素、
i要素に背景色や文字色の指定をするCSSを埋め込んでいます。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>お気に入りの本</title>
<style>
cite {border-bottom:dotted 3px green;}
em {font-weight:bold;}
i {color:navy;}
</style>
</head>
<body>
<p>私の<em>お気に入り</em>の本は、 <cite>A Cat's Life</cite> です。
<em>現代の人間社会における猫</em>について語った <i>P. Rahmel</i> の本です。</p>
</body>
</html>私のお気に入りの本は、 A Cat’s Life です。
現代の人間社会における猫について語った P. Rahmel の本です。
以下は、有効なメディアクエリですが、すでに非推奨となっています。
後方互換などの目的に残されているものであり、可能ならば使用を避けた方が良いでしょう。
style要素のmedia属性には、スタイルが適用されるメディアを指定します。
media属性でメディアの種類を指定することで、スクリーンで表示される場合のスタイル、プリントされる場合のスタイルなどを指定し分けることができます。
media属性が省略された場合のデフォルトは「all」です。
これは、デフォルトではすべてのメディアに適用されうることを意味します。
以下のサンプルは、style要素のmedia属性を使用してスタイルが適用されるメディアを指定しています。
<style media="(max-width: 600px)">
#a { width: 100px; height: 100px; }
</style>
<figure>
<picture>
<source srcset="a-square.png" media="(max-width: 600px)">
<img src="a-rectangle.png" width="300" height="150"
alt="バーニーフランクはスーツと眼鏡を着用しています。" id="a">
</picture>
<figcaption>バーニーフランク, 2011</figcaption>
</figure>以下のサンプルのように、CSSの「@media」を使用してスタイル指定することもできます。
<style>
#a { width: 300px; height: 150px; }
@media (max-width: 600px) { #a { width: 100px; height: 100px; } }
</style>
<figure>
<picture>
<source srcset="a-square.png" media="(max-width: 600px)">
<img src="a-rectangle.png" alt="Barney Frank wears a suit and glasses." id="a">
</picture>
<figcaption>Barney Frank, 2011</figcaption>
</figure>
HTMLの旧いバージョンではstyle要素のtype属性の値に text/css を指定していましたが、
現在のHTML標準ではstyle要素にtype属性の指定は不要です。
style要素はデフォルトで type=”text/css” の状態のCSSを生成するため、
style要素にはtype=”text/css” の指定は省略できます。
文書内にCSSソースを埋め込むのではなく外部CSSファイルにリンクしてCSSを適用する場合は、
style要素ではなくlink要素を使用します。