<style>タグは、CSS(Cascading Style Sheets)を文書に埋め込む際に使用します。
style要素は、通常は<head>~</head>の中に配置します。 style要素で文書にCSSソースを埋め込むことで、文書単位でスタイルを指定することができます。 (外部CSSファイルにリンクしてCSSを適用する場合は、link要素を使用します。)
style要素は type="text/css" の状態のCSSを生成します。 そのため、<style>タグを記述するときには、type="text/css" の指定は省略できます。 HTMLの旧いバージョンではtype属性を指定していましたが、現在のHTML標準ではstyle要素にtype属性の指定は不要です。
style要素のmedia属性には、スタイルが適用されるメディアを指定します。 media属性でメディアの種類を指定することで、スクリーンで表示される場合のスタイル、プリントされる場合のスタイルなどを指定し分けることができます。
media属性が省略された場合のデフォルトは「all」です。 これは、デフォルトではすべてのメディアに適用されうることを意味します。
以下は、有効なメディアクエリですが、すでに非推奨となっています。 後方互換などの目的に残されているものであり、可能ならば使用を避けた方が良いでしょう。
以下のサンプルは、典型的なstyle要素の使用例です。 <style>~</style>の中には、CSSを記述します。 この使用例では、style要素を使用して、 cite要素、 em要素、 i要素に背景色や文字色の指定をするCSSを埋め込んでいます。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>お気に入りの本</title>
<style>
cite {background:yellow;}
em {font-style:normal; color:red;}
i {font-style:normal; color:blue;}
</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 の本です。