Webページを作成する場合、印刷のことまで考えてレイアウトを作るのは大変です。
そのため、画面表示用と印刷用でスタイルを変え、印刷時はシンプルなレイアウトにすることがあります。
画面表示用と印刷用のWebページをそれぞれ用意するのは、手間がかかります。
しかし、スタイルシートを利用することで、この切り替えが容易に行えます。

画面用と印刷用で、別々のスタイルを適用するには、以下のように適用するスタイルを@mediaブロックの中に記述することで対応します。
@media メディアタイプ {
/* ここにスタイルを記述する */
}


HTMLでSTYLEタグを利用する場合には、以下の通りです。
<style media=メディアタイプ>
<!--
/* ここにスタイルを記述する */
-->
<style>


メディアタイプには、以下が指定できます。
screen    (コンピュータの画面表示)
print (印刷)
aural (音声)
handheld (携帯端末)
projection(プロジェクタ)
tty (文字が固定幅の機器)
tv (テレビ)
braille (点字ディスプレイ)
embossed (点字プリンタ)
all (上記すべて)


例えば、画面表示と印刷で分ける場合には、以下のようにします。

@media screen {
b{
color: red;
}
}

@media print {
b{
color: blue;
}
}

上記では、Bタグ(太字)で囲んだ文の色を画面表示時は赤、印刷時は青に設定しています。
上記のスタイルを適用したWebページを画面表示した時と印刷(プレビューでも可)時で文字色を確認してみると違いが分かります。

【補足事項】
・この方法を応用することで、印刷対象を制御することもできる。