4 Johdanto CSS-tyyleihin

4 Johdanto CSS-tyyleihin 4 Johdanto CSS-tyyleihin CSS (Cascading Style Sheets) on dokumenttien ulkoasun määrittelyyn (formatointi) käytettävä tyylikieli. CSS-tyylejä käytetään yleisesti HTML-kielen parina. CSS on ns. koristeleva (dressing-up) tyylikieli: sen avulla määritellään dokumentin ulkoasun, ei muokata dokumentin rakennetta. Tämä asettaa tietyt reunaehdot CSStyylien käytölle: dokumenttien rakenne on suunniteltava huolellisesti etukäteen. CSS on yleinen tyylikieli, jonka käyttö ei rajoitu pelkästään HTML-dokumentteihin: CSS-tyylien avulla voidaan määritellä myös XML-dokumenttien ulkoasu. XML:n yhteydessä käytetään yleensä XSL-tyylikieltä (Extensible Stylesheet Language). Cascading Style Sheets tarkoittaa suomeksi limittyviä tyylitiedostoja. Limitys on CSS-tyylien keskeinen ominaisuus, johon perehdytään myöhemmin. CSS-tyyleistä on olemassa kaksi lopullista versiota, joista tässä keskitytään kielen ensimmäiseen versioon (Cascading Style Sheets, Level 1). Selaimet tukevat CSS1- tyylejä laajasti, kielen uudemman version (CSS2) selaintuki on vielä rajallinen. CSS1 esittelee dokumenttien formatoinnin perusominaisuudet, joita CSS2 laajentaa: vakiotekstien lisääminen, mahdollisuus määritellä miltä dokumentti kuulostaa,... 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 115

4 Johdanto CSS-tyyleihin CSS-tyylien perusteet CSS-sääntö koostuu kolmesta osasta: valitsimesta (selector), ominaisuudesta (property) ja arvosta (value): VALITSIN {ominaisuus: arvo} Yksi sääntö voi sisältää useita ominaisuus-arvo-pareja: VALITSIN {ominaisuus: arvo; ominaisuus: arvo;} Valitsimen avulla määritellään ne HTML-elementit, joiden ulkoasuun säännön halutaan vaikuttavan. Ominaisuus-arvo-pareilla määritellään haluttu ulkoasu. Esimerkki: "käytä kaikissa P-elementeissä Garamond-kirjasinta": P {font-family: Garamond;} Esimerkki: "käytä kaikissa EM-elementeissä hopeanharmaata taustaväriä ja lihavoitua kirjasinta": EM {background-color: silver; font-weight: bold;} CSS-tyylien keskeinen ominaisuus on periytyminen: elementille määritellyt ominaisuudet vaikuttavat myös elementin lapsielementteihin. 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 116

4 Johdanto CSS-tyyleihin Tyylien liittäminen HTML-dokumenttiin CSS-määritysten liittäminen HTML-dokumenttiin voidaan tehdä kolmella eri tavalla: 1. Viittaaminen ulkoiseen tyylitiedostoon head-elementtiin sijoitettavan linkelementin avulla: <LINK rel="stylesheet" type="text/css" href="tyyli.css"> 2. Dokumenttikohtaiset tyylimääritykset kirjoitetaan head-elementtiin sijoitettavan style-elementin sisään: <STYLE type="text/css"> H1 { font-size: 120%;} </STYLE> 3. Elementtikohtaiset tyylimääritykset kirjoitetaan style-attribuutin arvoksi: <P style="border-width: 1px; border: solid;">olen laatikko!</p> Ulkoisen tyylitiedoston käyttö on ehdottomasti suositeltavin toimintatapa. Dokumenttikohtaiset tyylimääritykset vaikeuttavat ulkoasun ylläpitoa. Elementtikohtaiset tyylimääritykset vievät pohjan dokumenttien sisällön ja ulkoasun erottamiselta. 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 117

4 Johdanto CSS-tyyleihin CSS-tyylien perusta: valitsimet, ryhmittely, pseudoluokat ja - elementit CSS-tyylien kiinnittäminen haluttuihin elementteihin perustuu valitsimien käyttöön: Yksinkertaisin mahdollinen valitsin koostuu pelkästään elementin nimestä. Esimerkki valitsee kaikki P-elementit: P {color: blue;} Kontekstivalitsin määrittelee tarkemman elementtirakenteen. Seuraavassa valituksi tulevat taulukon (TABLE) otsikkorivin (THEAD TR) solut (TD): TABLE THEAD TR TD {background-color: orange;} HTML-elementtejä voidaan luokitella class-attribuutin avulla: <P>Tavallista tekstiä.</p> <P class="huomio">tämä teksti on tärkeää</p> Luokkavalitsimen avulla otetaan kantaa luokitteluun. Tyylimääritystä käytetään ainoastaan P-elementteihin, joiden class-atribuutin arvo on "huomio": P.HUOMIO {font-weight: bold;} 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 118

4 Johdanto CSS-tyyleihin HTML-elementeille voidaan antaa yksilöllinen tunniste id-attribuutin avulla: <DIV id="paivitystiedot">päivitetty 20.9.2004</div> Elementtikohtainen tyyli voidaan määritellä id-valitsimen avulla. Seuraava sääntö kohdistuu ainoastaan DIV-elementtiin, jonka id-attribuutin arvo on paivitystiedot : DIV#paivitystiedot { background-color: lime;} Valitsimia voidaan ryhmitellä kirjoitustyö vähentämiseksi ja tyylitiedoston selkeyttämiseksi. Tämä sääntö vaikuttaa dokumentin kaikkiin H1-, H2- ja H3- elementteihin: H1, H2, H3 { text-align: right;} Pseudoluokkien avulla voidaan ottaa kantaa esimerkiksi linkin (A-elementti) tilaan: A:link {color: blue;} /* linkissä ei ole vierailtu */ A:visited {color: purple;} /* linkissä on vierailtu */ A:hover {background-color: lime;} /* käyttäjä osoittaa linkkiä hiirellä */ A:active {text-decoration: blink;} /*linkki on aktiivinen */ Hover-pseudoluokka on määritelty vasta CSS2-tyyleissä. 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 119

4 Johdanto CSS-tyyleihin Pseudoelementtien avulla voidaan ottaa kantaa rakenteisiin, joita ei ole erikseen merkattu dokumentteihin. Sääntö suurentaa jokaisen P-elementin ensimmäisen kirjaimen: P:first-letter {font-size: bigger;} Tämä sääntö muuttaa jokaisen P-elementin ensimmäisen rivin värin vihreäksi. Huomaa, että "ensimmäinen rivi" riippuu selaimen leveydestä ja kirjasimen koosta, joten sen merkkaaminen dokumenttiin (elementtien avulla) on mahdotonta: P:first-line {color: green; } Valitsimia on mahdollista myös yhdistellä. Sääntö kohdistuu kaikkiin niihin A- elementteihin, jotka ovat sellaisten DIV-elementtien sisällä, joiden class-attribuutin arvo on navigaatio: DIV.navigaatio A {text-decoration: none;} Esimerkki selventää: <div class="navigaatio"> <a href="z-salamapartio.html">edellinen: Z-Salamapartio</a> <a href="muksuluuri.html">seuraava: Muksuluuri</a> </div> 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 120

4 Johdanto CSS-tyyleihin Miksi CSS-tyylejä kannattaa käyttää? Sisällön ja ulkoasun erottaminen: CSS mahdollistaa (osittain) HTML-dokumentin sisällön ja ulkoasun erottamisen toisistaan. Ylläpidon tehostaminen ja selkeyttäminen: ulkoasun muokkaaminen tehdään (yhtä!) tyylitiedostoa editoimalla ja muutokset sisältöön tehdään HTML-dokumentteihin. Yhdenmukaisuus: CSS-tyylien käyttö onnistuu ainoastaan, jos kaikki HTMLdokumentit merkataan samalla tavalla dokumenttien rakenteen yhdenmukaisuus. Yhdenmukainen ulkoasu johtuu siitä, että tyylimääritykset ovat yhdessä tiedostossa. Vahvat formatointiominaisuudet: CSS-tyylien formatointiominaisuudet ovat HTMLkielen tarjoamiin mahdollisuuksiin verrattuna huomattavasti monipuolisemmat. Dokumenttien rakenteen yksinkertaistaminen: HTML-dokumenttien rakenne on yksinkertaisempi, koska merkkaus sisältää ainoastaan sisällön merkityksen kuvailuun liittyvää merkkausta. Myös tiedostokoko pienenee. Saavutettavuus: saman sisällön esittäminen eri kohderyhmille (näkövammaiset, mobiililaitteiden käyttäjät) on (rajoitetusti) mahdollista pelkästään eri tyylitiedostojen avulla. Yksinkertainen rakenne auttaa esimerkiksi lukulaitteen käyttäjiä. 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 121

4 Johdanto CSS-tyyleihin CSS-tyylien käyttö: suunnittelua ja järjestelmällisyytä CSS-tyylien tarkoituksenmukainen käyttö edellyttää suunnitelmallista toimintaa: 1. Sisällön käsitteellinen jäsentäminen: Yleisen käsitemallin luominen sisällöstä. Käsitemallin suunnittelu edellyttää sisällön asiantuntemusta. 2. HTML-merkkauksen suunnittelu: Käsitemallin perusteella tehdään yksityiskohtainen suunnitelma. Suunnitelmassa määritellään ne elementit ja elementtirakenteet, joilla sisältö merkataan käsitemallin mukaisesti. 3. Sisällön merkkaaminen: Sisältö merkataan HTML-dokumenteiksi suunnitelman perusteella. Dokumentin yleinen rakenne voidaan sijoittaa ns. sivupohjaan, joka kopioidaan jokaisen tuotettavan dokumentin pohjaksi. 4. Tyylien kiinnittäminen: Tyylimäärityksen sijoitetaan erilliseen tyylitiedostoon, johon jokainen HTML-dokumentti viittaa. Teknisesti CSS-tyylien käyttäminen ei edellytä mitää erityistä: tyylien editointi onnistuu HTML-merkkauksen tapaan tavallisella tekstieditorilla. CSS-tyylikielen kielioppi on yksinkertainen, joten periaatteiden opettelun jälkeen käyttäminen on helppoa. Hyödyntämistä helpottavat verkosta löytyvät oppaat. 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 122

5 CSS1-ominaisuudet CSS1 luokittelee elementeille asetettavat ominaisuudet viiteen luokkaan: 1. Kirjasinominaisuudet (Font properties) 2. Väri- ja taustaominaisuudet (Color and background properties) 3. Tekstiominaisuudet (Text properties) 4. Suorakaideominaisuudet (Box properties) 5. Luokkaominaisuudet (Classification properties) Ominaisuudet voivat saada seuraavia arvoja: 1. Pituusarvoja (Lenght units) 2. Prosenttiarvoja (Percentage units) 3. Väriarvoja (Color units) 4. Lokaattoreita (URL) 5. Avainsanoja (Keyword) 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 123

Arvot Käydään aluksi läpi ominaisuuksille annettavissa olevat yleiset arvovaihtoehdot. Pituusarvot (<width>) Pituusarvon yksiköt on jaettu suhteellisiin ja absoluuttisiin. Pituusarvoon viitataan tässä materiaalissa tunnisteella <length>. Suhteellisia yksiköitä ovat elementin kirjasimen korkeus (em), x-kirjaimen korkeus (ex) ja pikseli (px). Esimerkkejä: H1 {margin: 0.5em;} /* ems, the height of the element's font */ H1 {margin: 1ex;} /* x-height, ~the height of the letter 'x' */ P {font-size: 12px;} /* pixels, relative to canvas */ Yksiköt em ja ex viittaavat sen elementin kirjasimen kokoon, jota sääntö koskee. Poikkeuksena on kirjasimen koko ('font-size'), jossa yksiköt viittaavat elementin vanhemman kirjasimen kokoon. Absoluuttisia yksiköitä ovat tuuma (in), senttimetri (cm), millimetri (mm), piste (pt) ja pica (pc). Yksi piste vastaa 1/72 tuumaa ja yksi pika 12 pistettä. Esimerkkejä: H1 { margin: 0.5in; } /* inches, 1in = 2.54cm */ H2 { line-height: 3cm; } /* centimeters */ H3 { word-spacing: 4mm; } /* millimeters */ 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 124

H4 { font-size: 12pt} /* points, 1pt = 1/72 in */ H4 { font-size: 1pc } /* picas, 1pc = 12pt */ Prosenttiarvot (<percentage>) 5 CSS1-ominaisuudet Prosenttiarvo viittaa pääsääntöisesti sen elementin kirjasimen kokoon, jota sääntö koskee. P { line-height: 120%; } /* 120% of the element's 'font-size' */ Elementin jälkejäiset perivät prosenttiarvon perusteella lasketun arvon, eivät koskaan prosenttiarvoa. Väriarvot (<color>) Väriarvo voi olla joko avainsana tai RGB (Red Green Blue)-arvo. Väriarvoksi voidaan määritellä jokin avainsanoista: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white tai yellow. RGB-arvo voidaan antaa joko heksadesimaalimuodossa, kolmena kokonaislukuna (0-255) tai kolmena prosenttiarvona. Heksadesimaalimuotoinen RGB-arvon esittämistapa on yleisesti käytössä myös HTML-kielessä. Heksadesimaalimuotoinen väriarvo alkaa aina #-merkillä: 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 125

P {color: #FF0000;} /* #rrggbb */ RGB-arvon kokonaislukuesitys on seuraava: rgb(punainen, vihreä, sininen), jossa jokainen väri voi saada arvon välillä 0-255: P {color: rgb(255,0,0);} /* rgb(rrr,ggg,bbb), 0-255 */ RGB-arvo prosenttiesitys on seuraava: rgb(punainen, vihreä, sininen), jossa jokainen väri voi saada arvon väliltä 0.0%-100.0%: Lokaattorit (<url>) P {color: rgb(50%,0%,0%);} /* rgb(rrr%,ggg%,bbb%), 0.0%-100.0% */ URL-osoitteeseen viitataan seuraavalla merkinnällä: BODY {background-image: url(http://www.osoite.fi/kuva.gif);} URL-osoite voi olla myös suhteellinen. Suhteelliset osoitteet käsitellään suhteessa tyylitiedostoon. Avainsanat BODY {background-image: url(kuva.gif);} Avainsanat ovat tapauskohtaisia ja ne on käyty läpi kunkin ominaisuuden yhteydessä. Sitten ominaisuuksien kimppuun: 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 126

Kirjasinominaisuudet Kirjasin Ominaisuus: font-family Arvo: [[<family-name> <generic-family>],]* [<family-name> <generic-family>] P {font-family: "Times New Roman", Times, serif;} Kirjasimelle voidaan normaalista poiketen antaa useita arvoja, koska eri koneiden kirjasinvalikoimat eroavat toisistaan. Kirjasimia etsitään koneesta listan määrittelemässä järjestyksessä. Viimeisenä vaihtoehto kannattaa antaa yleinen, käyttöjärjestelmästä riippumaton kirjasimen nimi (generic family): 'serif' (esim. Times), sans-sefif' (esim. Helvetica), cursive' (esim. Zaph-chancery), 'fantasy' (esim. Western) tai 'monospace' (esim. Courier). 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 127

Kirjasimen tyyli Ominaisuus: font-style Arvo: normal italic oblique EM {font-style: normal;} Kirjasimen tyyliksi voidaan valita normaali ('normal') tai kursivoitu ('italic' tai 'oblique'). Kursivointi kannattaa tehdä selainten paremmin tukeman 'italic'-arvon avulla. Kirjasimen tyylin normal-arvo on tarpeen silloin, kun selain esittää oletuksena HTML-elementin kursivoituna (esim. EM-elementti). Kirjasimen koko Ominaisuus: font-size Arvo: <absolute-size> <relative-size> <length> <percentage> Kirjasimen koko voidaan antaa neljän eri arvoalueen avulla: absoluuttisena arvona (<absolute-size>), suhteellisena arvona (<relative-size>), pituusarvona (<length>) tai prosenttiarvona (<percentage>). Absoluuttiset arvot: xx-small x-small small medium large x-large xx-large STRONG {font-size: large;} 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 128

Suhteelliset arvot: larger smaller BLOCKQUOTE {font-size: larger;} Suhteellinen arvo muuttaa kirjasimen kokoa yhden absoluuttisen arvon verran suuremmaksi ( larger ) tai pienemmäksi ( smaller ). Esimerkiksi larger muuttaa (vanhemmalta perityn) arvon x-small arvoksi small. Pituusarvot: Pituusarvo voi olla suhteellinen (em, ex tai px) tai absoluuttinen (in, cm, mm, pt tai pc). Suhteellisia arvot perustuvat normaalista poiketen elementin vanhemman kokoon. Prosenttiarvot: Prosenttiarvo kertoo elementin koon suhteessa vanhemmalta perittyyn kokoon. 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 129

Kirjasimen vahvennus Ominaisuus: font-weight Arvo: normal bold bolder lighter 100 200 300 400 500 600 700 800 900 EM {font-style: normal; font-weight: bold;} STRONG {font-weight: bolder;} Normaali lihavoitu kirjasin (vrt. b-elementti) saadaan arvolla 'bold'. Kirjasimen vahvennus voidaan määritellä myös suhteellisesti: perittyä vahvennusta voidaan lisätä ('bolder') tai vähentää ('lighter'). Kolmas vaihtoehto on kirjasimen vahvennuksen määrittely numeroarvolla: arvo '400' vastaa arvoa 'normal' ja arvo '700' vastaa arvoa 'bold'. Kirjasimen merkkikoko Ominaisuus: font-variant Arvo: normal small-caps H3 {font-variant: small-caps;} Merkkikoon arvolla 'small-caps' isot kirjaimet kirjoitetaan normaalisti. Pienet kirjaimet kirjoitetaan ison kirjaimen näköisillä kirjaimilla, joiden koko on isoa kirjainta pienempi. 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 130

Väri- ja taustaominaisuudet Väri Ominaisuus: color Arvo: <color> P {color: red;} P {rgb(255,0,0);} Ominaisuuden 'color' avulla määritellään elementin (piirto)väri. Yleisin käyttötapaus on tekstin värin määritteleminen. Taustaväri Ominaisuus: background-color Arvo: <color> transparent BLOCKQUOTE {color: #CCCCCC;} Taustaväri voidaan määritellä esimerkiksi tekstikappaleelle, taulukon solulle tai napille. Dokumentin taustaväri vaihdetaan BODY-elementin avulla (periytyminen): BODY {background-color: lime;} 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 131

Taustakuva Ominaisuus: background-image Arvo: <url> none BODY {background-image: url(tomaatti.gif);} Taustakuva voidaan määritellä koko dokumentin sijaan esimerkiksi pelkästään taulukoille. Taustakuvan toisto Ominaisuus: background-repeat Arvo: repeat repeat-x repeat-y no-repeat BODY { BACKGROUND-IMAGE: URL(TOMAATTI.GIF); BACKGROUND-REPEAT: NO-REPEAT;} Taustakuva voidaan määritellä toistettavaksi ainoastaan vaakasuunnassa ('repeat-x'), ainoastaan pystysuunnassa ('repeat-y') tai molemmissa ('repeat'). Arvolla 'no-repeat' taustakuvaa ei toisteta. 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 132

Taustakuvan kiinnitys Ominaisuus: background-attachment Arvo: scroll fixed BODY { background-image: url(tomaatti.gif); background-attachment: fixed;} Arvo 'fixed' kiinnittää taustakuvan siten, että se pysyy paikallaan vaikka sivua vieritetään. Taustakuvan asemiointi Ominaisuus: background-position Arvo: [<percentage> <length>]{1,2} [top center bottom] [left center right] Taustakuvan paikka määritellään arvoparina. Arvopari voi koostua prosentti- ja pituusarvoista. Arvoparin ensimmäinen arvo kertoo kuvan paikan pystysuunnassa ja toinen arvo paikan vaakasuunnassa. Paikka voidaan määritellä myös avainsanojen avulla: vaakasuunnassa left, center tai right ja pystysuunnassa top, center tai bottom. 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 133

Seuraava sääntö sijoittaa taustakuvan keskelle taulukon solua: TD { background-image: url(tomaatti.gif); background-position: 50% 50%;} Taustakuvan paikka määritellään oletuksen suhteessa elementin kokoon. Selaimen ruudun keskellä pysyvä taustakuva saadaan, kun kiinnitetään taustakuva 'backgroundattachment'-ominaisuuden arvolla fixed. Esimerkki selventää: BODY { background-image: url(tomaatti.gif); background-attachment: fixed; background-position: center center;} Taustakuvan paikka kannattaa määritellä joko prosenttiarvoilla tai avainsanojen avulla, jolloin käyttäjän näytön koolla tai tarkkuudella (resoluutio) ei ole merkitystä lopputuloksella. 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 134

Tekstiominaisuudet Tekstin koristelu Ominaisuus: text-decoration Arvo: none [ underline overline line-through blink ] A {text-decoration: none;} EM {text-decoration: blink;} SPAN.vanhatieto {text-decoration: line-through;} Tekstiä voidaan koristella lisäämällä viiva tekstin alapuolelle ('underline') tai yläpuolelle ('overline'). Teksti voidaan myös yliviivata ('line-through') tai asettaa vilkkumaan ('blink'). Selaimen oletuksena käyttämät koristelut (esimerkiksi viiva linkkitekstin alla) voidaan poistaa arvolla 'none'. Tekstin tasaus pystysuunnassa Ominaisuus: vertical-align Arvo: baseline sub super top text-top middle bottom text-bottom <percentage> TD {vertical-align: top;} 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 135

Pystysuuntaisen tasauksen määrittäminen on tarpeen esimerkiksi taulukon soluissa, joissa oletuksena puoliväliin ( middle ) sijoitettava teksti voidaan tasata joko solun yläreunaan ( top ) tai alareunaan ( bottom ). Tekstin tasaus vaakasuunnassa Ominaisuus: text-align Arvo: left right center justify P {text-align: justify;} H1 {text-align: right;} Teksti voidaan tekstinkäsittelyohjelmien tapaan keskittää ('center') tai tasata vasempaan ('left') tai oikeaan ('right') reunaan. Tekstin tasaaminen molempiin reunoihin onnistuu arvolla 'justify'. Molempiin reunoihin tasausta ei yleensä suositella, koska tekstin lukeminen näytöltä vaikeutuu. Tekstin sisennys Ominaisuus: text-indent Arvo: <length> <percentage> P {text-indent: 1em;} BLOCKQUOTE {text-indent: 10%;} 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 136

Ominaisuuden 'text-indent' avulla määritellään elementin ensimmäisen tekstirivin sisennys. Sanojen välistys Ominaisuus: word-spacing Arvo: normal <length> H1 {word-spacing: 1em;} Sanojen väliin jätettävän tyhjän tilan pituuteen vakutetaan word-spacing ominaisuuden avulla. Ominaisuudelle anntettava arvo lisätään oletuksena käytettävään pituuteen. Väliä voidaan lyhentää antamalla ominaisuudelle negatiivinen arvo. Kirjainten välistys Ominaisuus: letter-spacing Arvo: normal <length> BLOCKQUOTE {letter-spacing: 0,1em;} Kirjainten väliin jätettävän tyhjän tilan pituuteen voidaan vaikuttaa letter spacing ominaisuuden avulla. Ominaisuudelle annettava arvo lisätään kirjainten välin oletuspituuteen. Väliä voidaan lyhentää antamalla ominaisuudelle negatiivinen arvo. 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 137

Kirjainkoon muokkaus Ominaisuus: text-transform Arvo: capitalize uppercase lowercase none H1 {text-transform: uppercase;} Teksti voidaan määritellä kirjoitettavaksi kokonaan isoilla ( uppercase ) tai kokonaan pienillä ( lowercase ) kirjaimilla. Arvo capitalize muuttaa jokaisen sanan ensimmäisen kirjaimen isoksi. Vanhemmilta peritty arvo voidaan poistaa käytöstä arvolla none, jos kirjainkoko halutaan säilyttää. Rivin korkeus Ominaisuus: line-height Arvo: normal <number> <length> <percentage> BLOCKQUOTE {line-height: 120%;} BLOCKQUOTE {text-indent: 1.2;} BLOCKQUOTE {text-indent: 1.2em;} Rivin korkeus voidaan määritellä kolmella tavalla: numeroarvona, pituusarvona tai prosenttiarvona. Numeroarvona esitetty rivinkorkeus lasketaan kertomalla kirjasimen koko annetulla numerolla. Prosenttiarvo lasketaan myös elementin kirjasimen koon perusteella. 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 138

Suorakaideominaisuudet Marginaali Ominaisuus: margin-top margin-right margin-bottom margin-left margin Arvo: <length> <percentage> auto H1 {margin-top: 2em; margin-bottom: 1em;} Elementin marginaali yläpuolella ('margin-top'), alapuolella ('margin-bottom'), vasemmalla puolella ('margin-left') ja oikealla puolella ('margin-right'). Marginaali voidaan määritellä kerralla elementin jokaiselle sivulle ominaisuuden 'margin' avulla. BLOCKQUOTE {margin: 10%;} Marginaalin prosenttiarvo lasketaan lähimmän elementin lohkotyylisen edeltäjän leveydestä. 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 139

Sisällön etäisyys reunasta Ominaisuus: padding-top padding-right padding-bottom padding-left padding Arvo: <length> <percentage> DIV.paivitetty {padding-top: 0.1em; padding-bottom: 0.1em;} Elementin sisällön etäisyys reunasta yläpuolella ('padding-top'), alapuolella ('paddingbottom'), vasemmalla puolella ('padding-left') ja oikealla puolella ('padding-top'). Sisällön etäisyys reunasta voidaan määritellä kerralla elementin jokaiselle sivulle ominaisuuden 'padding' avulla. DIV.paivitetty {padding: 5%;} Etäisyyden prosenttiarvo lasketaan lähimmän elementin lohkotyylisen edeltäjän leveydestä. 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 140

Reunaviiva Ominaisuus: border-top border-right border-bottom border-left border Arvo: <border-width> <border-style> <color> H1 {border-bottom: 3px solid black;} Elementin reunaviiva yläpuolella ('border-top'), alapuolella ('border-bottom'), vasemmalla puolella ('border-left') ja oikealla puolella ('border-right'). Reunaviivalle voidaan määritellä leveys (<border-width>), tyyli (<border-style>) ja väri (<color>). Reunaviiva voidaan määritellä kerralla elementin jokaiselle sivulle ominaisuuden 'border' avulla. Reunaviivan leveys: thin medium thick <length> 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 141

Reunaviivan tyyli: none dotted dashed solid double groove ridge inset outset Reunaviivan väri: Ks. väriarvot. Elementin leveys ja korkeus Ominaisuus: width height Arvo: <length> <percentage> auto TEXTAREA {width: 15em; height: 10em;} Elementille voidaan määritellä leveys ('width') ja korkeus ('height'). 5 CSS1-ominaisuudet 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 142

Kellutus Ominaisuus: float Arvo: left right none IMG {float: left;} Elementille voidaan asettaa kellumaan ominaisuuden 'float' avulla. Ominaisuuden avulla voidaan esimerkiksi asettaa kuva kellumaan sivun vasempaan reunaan siten, että teksti rivitetään kuvan oikealle puolelle. Kellutus elementin vierellä Ominaisuus: clear Arvo: none left right both H1 {float: left;} Ominaisuuden 'clear' avulla lementille voidaan määritellä ne sivut, joilla sallitaan elementtien kellutus. 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 143

Luokkaominaisuudet Listan tyyli Ominaisuus: list-style Arvo: <list-type> <list-image> <list-position> UL {list-style: upper-roman;} UL {list-style: url(bullet.gif);} UL {list-style: upper-roman outside;} Ominaisuuden 'list-style' avulla muokataan listan tyyppiä (<list-type>), lista-alkion edessä olevaa kuvaa (<list-image>) ja lista-alkion edessä olevan symbolin sijaintia (<listposition>). Listan tyyppi: disc circle square decimal lower-roman upper-roman lower-alpha upper-alpha none Lista-alkion kuva: <url> none 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 144

Lista-alkion symbolin asemointi: inside outside Elementin esitystapa Ominaisuus: display Arvo: block inline list-item none INPUT {display: block;} Esitystapa vaikuttaa elementin esittämiseen näytöllä: lohkotyylinen ('block') elementti aiheuttaa rivinvaihdon elementin alkuun ja loppuun, tekstityylinen ('inline') elementti rivittyy selaimen leveyden mukaan. Listatyylinen elementti ('list-item') on lohkotyylisen elementin erikoistapaus. Elementti piilotetaan 'display'-ominaisuuden arvolla 'none'. Tyhjämerkkien tulkinta Ominaisuus: white-space Arvo: normal pre nowrap PRE {white-space: pre;} Elementin sisällä olevilla tyhjämerkeillä (välilyönnit, rivinvaihdot, tabulaattorit) voidaan joko sieventää yhdeksi välilyönniksi ('normal') tai näyttää ruudulla ('pre'). Arvo 'nowrap' määrittelee, että rivi katkaistaan ainoastaan br-elementin kohdalta. 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 145

Lopuksi CSS-tyylien ensimmäisen version tarjoamat vaihtoehdot HTML-dokumentin ulkoasun muokkaamiseen ovat monipuoliset. Mahdollisuuksia kannattaa kuitenkin hyödyntää maltillisesti: - absoluuttisesti määritelty kirjasimen koko saattaa estää kirjasimen suurentamisen: vaikeuksia heikkonäköisille - tekstin ja taustavärin kontrastin on oltava riittävä, muuten lukeminen on hankalaa - myös taustakuvien kanssa on oltava tarkkana: liian voimakas taustakuva hankaloittaa lukemista - kursivoitu teksti on vaikeaa lukea näytöltä, toiset kirjasimet sopivat paremmin näytöltä luettavaksi kuin toiset,... CSS2-tyylien mediavalitsimet mahdollistavat erilaisten tyylitiedostojen toteuttamisen eri päätelaittelle. Tämä mahdollistaa periaatteessa sivuston päätelaitekohtaisen räätälöinnin. Käytännössä paras vaihtoehto on kuitenkin eri versioiden toteuttaminen joko mekaanisesti (käsin) tai esimerkiksi dynaamisesti ohjelmointikielen X tai vaikkapa XSL-muunnosten ja XML:n avulla. 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 146