CSSファイルを読み込むときに、media属性で用途を指定できます。画面表示用、印刷用など、目的ごとにさまざまに使い分けられます。

Webページでは、画面で表示するだけでなく、印刷して資料として利用することもあります。Webページのデザインによっては、画面表示する場合と、印刷する場合でスタイルの指定をした方が良い場合も多々あります。

また、携帯端末用にスタイルを変えた方がよいこともあります。
たとえば、画面では暗い背景色に明るい文字で見やすい表示にしていても、Webページを印刷するときは、ブラウザの初期設定では背景が印刷されないため、紙面では見づらくなってしまいますよね。

そんな場合、用途ごとにCSSを使い分ける場合には、画面表示用、印刷用などと用途ごとに異なるCSSファイルを用意すれば解決できます。

link要素を使ってCSSを読み込むときは、media属性を利用します。たとえば、画面表示用のCSSの場合には次のように指定します。
印刷用のCSSを読み込むときは、別のlink要素で読み込みを指定して、media属性でprintを指定します。

[html]<link herf="display用.css" rel="stylesheet" type="text/css" media="screen" />[/html]

また、@importを利用してCSSファイルを読み込むときは、CSSファイル名に続けてメディアタイプを指定します。
たとえば、印刷用のCSSの場合には、次のように指定します。

[css]@import url("print用.css) print;[/css]

media属性の値に応じて、ブラウザはCSSファイルを適用します。
パソコンの画面表示用にはmedia=”screen”と指定されたCSSファイルを、media=”print”と指定されたCSSファイルは印刷プレビューまたは印刷時に適用されます。