如果你有一個深底色的網站，而你的訪客又不巧經常會有列印你某些網頁的需要（比方說：產品型錄、操作說明、表格文件、訂單等等），一般的CSS解法，通常是寫成兩個滿足不同需求的CSS檔：
<link href="styles.css" rel="stylesheet" type="text/css" media="screen" />
<link href="print.css" rel="stylesheet" type="text/css" media="print" />
其中，前者，即 styles.css 所定義的是網頁的螢幕（screen）樣式，也就是我們從電腦螢幕所看到的網站樣貌。如上圖所示的黑底黃字樣式，CSS定義可能宣告如下：
/* 螢幕樣式 */
body { color: #fc0; background: #000; }
}
你的網站訪客或許跟你一樣，在螢幕瀏覽網站頁面時，偏好這種黑底黃字的樣式設計，但，如果遇到需要將網頁列印出來參考閱讀時，白底黑字或許是更合適實用的選擇：
如上圖所示，前例提到的列印樣式定義檔 print.css，可能就定義成這樣的白底黑字：
/* 列印樣式 */
body { color: #000; background: #fff; }
}
然而，如果你嫌麻煩，不想寫兩個CSS檔來分別定義螢幕與列印樣式，其實可以用@media在單一CSS檔裡作相同效果的定義宣告：
/* 螢幕與列印樣式 */
@media all
{
body { color: #fc0; background: #000; }
}@media print
{
body { color: #000; background: #fff; }
}
