A stíluslapok segítségével eltérő megjelenést adhatunk egyazon dokumentumnak a különböző típusú médiákon. Beállíthatjuk például, hogy a dokumentumunk milyen stílus szabályokat alkalmazzon a nyomtatás során (pl. a weboldalon található menüket „láthatatlanná” tehetjük a nyomtatott médián, a szerzői (copyright) információkat viszont megjeleníthetjük azon) és milyet a képernyőn. Az akadálymentes honlapok elkészítésekor, illetve a honlap akadálymentesítés során a CSS számos lehetőséget nyújt az akadálymentes megjelenés kialakításához.

Bizonyos tulajdonságok csak meghatározott médiákhoz használhatóak pl. page-break-before, ami csak lapozós médiához használható. A következő média típusokat támogatja a CSS:

– all: minden eszköz;
– braille: tapintáson alapuló eszközök;
– embossed: braille nyomtatók;
– handheld: tenyérszámítógépek;
– print: lapozható dokumentumok;
– projection: kivetítők;
– screen: színes számítógép kijelzők;
– speech: beszédszintetizátorok;
– tty: terminálok;
– tv: televizió típusú eszközök;

Az ismeretlen médiatípus neveket figyelmen kívül hagyják a böngészők. Az azonos médiatípusokra értelmezhető tulajdonságokat a CSS ajánlás médiacsoportokba sorolja.

A @media szabállyal határozhatjuk meg, hogy a stíluslap szabályok milyen típusú médiákra vonatkozzanak. Vesszővel kell tagolnunk a médiatípusok listáját. Például:

@media print, tv { body {font-size: 18pt }}

A stíluslapok médiafüggőségnek a meghatározására két fajta lehetőségünk van. Az első meghatározás a stíluslapból történik. Az alábbi példában az @import szabály attribútumaként a lapozható médiákat adtuk meg, ami azt jelenti, hogy az importált stíluslap szabályok csak a célmédiára (print) lesznek alkalmazva. Egyik IE sem támogatja ezt a fajta média meghatározást, azaz pontosan azt nem, ha paramétert adunk egy @import szabálynak. Szűrőként is alkalmazhatjuk ezt a hiányosságot, ha azt akarjuk, hogy egyik IE se jelenítse meg a megadott stíluslapot.

@import url(„nyomtatas.css”) print;

Meghatározhatjuk még a médiafüggőséget a dokumentum nyelvben is, a link elem attribútumaként. A nyomtatási képhez és a nyomtatott dokumentumokhoz a „nyomtatas.css”-t rendeljük hozzá. Például:

<link rel=”stylesheet” type=”text/css” media=”print” href=”nyomtatas.css”>

Itt ragadom meg az alkalmat, hogy röviden megemlítsem, a böngészők eltérő alapbeállítással rendelkeznek a nyomtatás terén. Egy fekete háttérrel és fehér színű szöveggel rendelkező oldalt eltérő formában nyomtatnak ki. Az Opera azt nyomtatja, amit a böngészőben látunk. Amennyiben fekete háttér és fehér szöveg van a böngészőben, akkor azt kapjuk eredményül a nyomtatás során is. A Gecko alapú böngészők, (például a Firefox) teljesen fehér hátteret és fekete szöveget nyomtatnak. Az IE6, IE7B és a Safari szintén fehér hátteret nyomtat, de a böngészőben fehér színű szöveg szürke árnyalattal jelenik meg, nem feketén. A fekete szöveg természetesen fekete marad.