Sivuston kokonaisuuden luominen

Lisää CSS:n sovelluksia

CSS:ssä on erityinen mediakäsite, joka mahdollistaa sivun erilaisen esittämisen eri tilanteissa (kuvaruutu, mobiili, paperi, dia, tv)
Toistaiseksi tärkein ja parhaiten toimiva sovellus on ns. tulostusnäkymä, jossa esitetään dokumentti paperilla tai muussa sivujakoisessa mediassa.
Toistaiseksi paperitulostuksen muotoilu on suhteellisen kehittymätöntä: sivujaon estäminen ei onnistu, mutta sivujaon aikaansaaminen kylläkin

Käytännössä tarkoitetaan erillisen tulostusta varten suunnitellun CSS-tiedoston tekemistä
tiedostosta voidaan jättää esimerkiksi navigaatio ja linkkien alleviivaus pois, jolloin paperitulostus näyttää siistimmältä
samoin fontti voidaan muotoilla paperille sopivammaksi

Esimerkkejä:

Tulostusta varten tehtävät asetukset kirjoitetaan omaan CSS-tiedostoon, joka linkitetään sivulle LINK-elementillä:

Esimerkiksi

<link rel="stylesheet" type="text/css" href="tulostustyyli.css" media="print" >

LINK-elementissä oleva media-määrite aiheuttaa sen, että tyyliohje vaikuttaa vain paperitulostuksessa
paperitulostukseen suunnitellussa CSS-tiedostossa riittää, että määritellään vain tulostukseen vaikuttavat erityistekijät. Muut ulkoasumääritykset haetaan perustiedostosta.

Jos tulostusta koskevia tyylisääntöjä on vähän, kätevintä on kirjoittaa ne osaksi sivun yleistä tyyliohjetta
Se tapahtuu erityisellä @media-rajoituksella

Esimerkiksi

body {font-family: Arial, Helvetica, sans-serif}

@media print  {
body {font-family:Myriad, Times, serif;}
a {text-decoration:underline;}
}

Kätevää voi olla esimerkiksi fonttilajin muutos, linkkien muotoilujen poistaminen sekä navigaation poistaminen tulostusnäkymästä
Navigaatio (tai muut elementit) poistetaan näkymästä display-elementillä

Esimerkiksi

#navi {display:none;}

overflow, vierityspalkki, iframe