CSS kullanarak aynı sayfayı farklı platformlara uyumlu hale çevirebilirsiniz. Nice sitelerce hep şu mantık kullanılır;

Önce sitenin genel sunumu yapılır. Ve o sayfadan çıktı alınması için bir link verilir. Linke tıklanır ve başka sayfaya gidilerek yazdırma işlemi tekrar sorulur.

Halbuki neden o sayfa üzerindeki butona tıklayarak yazdırmasın? Ve yazıcısı uyumlu bir çıktı ile. Evet bu CSS'de mevcuttur. Bir sayfayı farklı platformlara uygun halde hazırlarsınız ve araç tipini belirterek hangi platformda hangi stil dosyanın yorumlanacağını belirtirseniz bir çok zahmetten kurtulursunuz. Kullanılabilir araç tipleri şunlardır;
all (Tüm araç tipleri)
aural (Konuşma sentezleyiciler)
braille (Görme engelliler için araçlar)
embossed (Görme engelliler için kabartma oluşturan araçlar)
handheld (Modern el cihazları)
print (Yazıcılar)
projection (Projektörler)
screen (Ekran, monitör)
tty (Eşit karakter aralığı kullanan cihazlar)
tv (Televizyon)
Ve bu araç tiplerini ise css dosyalarımıza şöyle ifade edebiliriz,

Birinci yöntem;
pc.css" media="screen" />

yazici.css" media="print" />
media etiketi eklenerek kullanılacak araç tipi belirtiliyor. Dikkat edin 2 ayrı css dosyamız olacaktır. Her platform için ayrı tanımlama yapmak zorundayız. Fakat bunu bir dosyadan da yönetmek de ikinci yöntemimizde göreceğiniz gibi mümkündür.

İkinci yöntem
@media screen {
p { color: #f00; }
}
@media print <
p { color: #000; }
span { display: none; }
}
@media screen, print {
p { font-size: 13px; }
}
Bu kodumuzuda her zaman kullandığımız bağlantı şekli ile, media etiketi belirtmeden kullanmalısınız. Çünkü gerekli tanımlamaları stil dosyamız içinde yazmış olacağız. Bu biçimlendirmemiz için XHTML kodumuzda şöyle olsun;

CSS Rehberi'ne hoşgeldiniz


Bu şekilde yapılmış bir tanımlamaya göre bilgisayarınızda 13px büyüklüğünde kırmızı renkte CSS Rehberi'ne hoşgeldiniz yazısı çıkacaktır. Ama eğer bu sayfayı yazdırırsanız kağıt üzerinde 13 pc büyüklüğünde ve siyah renkte sadece CSS Rehberi yazısı var olacaktır.