<style>〜</style>
style（スタイル）要素は文書にCSSによるスタイル情報を記述します。
| style要素 | 説明 |
|---|---|
| カテゴリー | メタデータコンテンツ。scoped属性が指定されている場合はフローコンテンツ |
| コンテンツモデル | スタイルシートの記述 |
| 使用できる場所 | ・メタデータ・コンテンツが期待される場所 ・head 要素の子要素となる noscript 要素の中 |
style要素で使用できる属性
| 属性名 | 属性値 | 説明 |
|---|---|---|
| グローバル属性のtitle属性 | 例 ・リンクの場合は、リンク先のタイトルや説明など。 ・画像の場合は、画像の著作権情報、撮影場所、撮影日時、その他の説明など。 ・引用の場合は、引用元に関する追加情報など。 ＊style要素（代替のスタイルシートを指定する） <style title="代替スタイルシート"> ここにスタイルシートを記述する</style> | style要素にtitle属性によってタイトルが付与された場合は特別な意味を持ちます。 文書内で最初に記述されたtitle属性付きのstyle要素は優先スタイルシートとなり、2つ目以降は代替スタイルシートと定義される。 |
| media | メディアクエリ | スタイルシートを適用する対象となるメディアタイプを指定 |
| blocking | キーワドであるrenderを指定 | 要素が潜在的にレンダリングブロッキングであるかどうかを指定する。 |
link要素にblocking属性を使用する場合
rel="modulepreload" rel="preload" rel="stylesheet" のいずれかが指定された場合にのみ、bloking属性が使用可能。
media 属性に指定できるメディア名
| 名前 | 適用対象 |
|---|---|
| all | 全てのデバイス |
| aural | 音声合成装置 |
| braille | braille |
| handheld | 携帯電話など、画面が小さいデバイス |
| プリンタでの印刷、あるいは印刷のプレビュー画面 | |
| projection | プロジェクタ。Opera のフルスクリーンモード時もこれに該当する |
| screen | 一般的なコンピュータスクリーン。通常、パソコン、スマートフォンで動作するブラウザソフトはすべて対象となる |
| tty | テレタイプなど、表示文字幅が固定されたデバイス |
| tv | テレビなど、解像度や色数に制限があるデバイス |
複数の値を指定したい場合は、カンマ（,） 区切りで複数指定する。
media 属性が省略されている場合はallとして取り扱われる。特に対象デバイスを指定する必要がない場合は指定する必要はない。
メディア名の後ろに 「and」 に続けて細かい条件を指定することも可能になる。
例：media="screen and (max-width: 870px)"
使用例
<!-- link 要素に指定した例。指定されたメディアでのみスタイルが適用される -->
<link media="screen, projection" rel="stylesheet" href="./style.css">使用例
<!-- 点字デバイス向けの代替文書の場所を示した例。
ただしブラウザがこの情報を閲覧者に提供するかは不明なため、文書内にa要素などでリンクも設置しておく-->
<link media="braille" title="点字デバイス向け" rel="alternate" href="braille.html">使用例
<!-- a要素に指定することでリンク先がプリント用ページであることを示す -->
<p><a media="print" href="print.html">プリント用ページはこちら</a></p>