今日の疑問！

media 属性を入れると、無関係なデバイスが不要なスタイルシートを読み込むロスがない。

screen

モニタ

tty

固定幅の文字グリッドを用いたメディア。携帯など。（画素単位 px はダメ。）

tv

TV （解像度・色数が少ない。スクロール能力に制限。）

projection

プロジェクター

handheld

携帯デバイス（小画面、モノクロ、ビットマップ画像。）

print

プリンター

braille

点字の触覚をフィードバックするデバイス

embossed

点字のページを出力するプリンター

speech

音声合成機器

aural

音声合成機器

all

すべてのデバイス（デフォルト）

記述方法 （HTML ファイル）

<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/special.css" media="screen,tv,print">

記述方法 （CSS ファイル）

@import  url( common.css ) ;
@import  url( special.css )  screen, tv, print ;
もしくは
@import  " common.css ";
@import  " special.css "  screen, tv, print ;

次のような記述方法もあり
@media  screen  {   /* 画面出力用 */
   body  { font-size: 14px ; }
}
@media  print  {  /* 印刷用 */
   body  { font-size: 12px ; }
}
@media  screen, print  {   /* 両方に適用 */
   body  { line-height: 1.5 ; }
}