Cascading Style Sheets

CSS eli Cascading Style Sheets -nimen kaskadi tarkoittaa suoraan suomennettuna vesiputousta ja tässä yhteydessä tyyliohjeiden yhteisvaikutusta, periytyvyyttä ja kumoutumista. Analogisesti ajatellen: vesiputouksen ryöppyävien pisaroiden vaikutus putouksen ulkopuolelle eli tyyliohjeilla ympäröiville elementeille.

CSS ei ole ohjelmointia. Se on tarkoitettu html-sivujen hienosäätöiseen muotoiluun käytetyn mittayksikön tarkkuudella, mutta sillä voisi tehdä sivun myös ilman html-koodia. Muotoilut tehdään valmiiksi tyyliohjetiedostossa, joka kirjoitetaan Notepadissa ilman mitään html-tyyppisiä alku- ja loppukoodeja ja tallennetaan *.css-tunnuksella. Muotoilut ovat ns. classeja eli luokkia ja html-tagit luokkaselektoreja, jotka kertovat mihin elementtiin muotoilu kohdistuu.

Tyylimuotoiluihin viitataan sekä html-tiedoston alussa tyyliohjetiedoston hakupolulla että html-koodissa luokan nimellä, jolloin tyylit näkyvät sivuilla. Tyyliohjeet voi upottaa myös html-sivujen alun head-osaan, mutta monisivuisissa sivustoissa se ei ole tarkoituksenmukaista.

Koodi ei ole itseisarvo, vaan keino sisällön ja muodon yhdistämiseen. Pelkkä perustyökalu, siinä missä erilaiset lapiotkin erilaisiin kaivuutehtäviin. Ei siis kannata pohtia koodille kunhan-nyt-jotakin-sisältöä vaan sisällölle tarkoituksenmukainen koodi.

Tyyliohjeet vähentävät koodin määrää huomattavasti ja pienentävät siten tiedostojen kokoa. Sivujen muotoilujen - esimerkiksi linkkivärien tai reunaviivojen - kokeilu on vaivatonta, koska muutokset tehdään vain yhteen paikkaan tyyliohjetiedostoon ja ne näkyvät kuitenkin kaikkialla, minne kyseinen tyyli on liitetty. Paikallisia hienosäätöjä voi tehdä siellä täällä vielä tarpeen mukaan, mutta on samalla tarkistettava miten ne toimivat muilla selaimilla.

Tyyliohjeilla on sama merkitys kuin tekstinkäsittely- ja taitto-ohjelmienkin tyyleillä. Seuraavassa esitellään vain tärkeimmät CSS-perusmuotoilutyylit aakkosjärjestyksessä arvoineen ja luokkaselektoreineen. Etsi painamalla Ctrl + F. Vaikka CSS vaatisi ns. strictiä (= tarkka, täsmällinen, ehdoton) html-koodia, niin kuitenkin html-validaattorin hyväksymän sivun löytyminen verkosta on kuin löytäisi neulan heinäsuovasta.

Muille selaimille voi tehdä rinnakkaisen CSS-tyyliohjetiedoston, ja muokata sitä kunkin selaimen vaatimusten mukaiseksi. Jokaisen sivun head-osaan lisätään rivi <script src="browser.js"></script>, joka kutsuu JavaScript-tiedoston browser.js tunnistamaan, mikä selain on käytössä ja päättämään mitä tyyliohjetiedostoa käytetään. Tämä mallitiedosto on ensin tallennettava *.js-muotoon ja valittava sille ja tyyliohjetiedostoille sopivat nimet, joissa ei ole ääkkösiä eikä välilyöntejä. Ks. myös Selaimen tunnistus. Tällä sivustolla on myös Gecko-selaimille ja Operalle erilliset tyyliohjetiedostot, joissa silmiinpistävimmät kauneusvirheet on korjattu.

MERKINTÄTAPOJA

Syntaksi on tyyliohjetiedostossa aina sama: .luokkaselektori { deklaraatio; }, ja html-tiedostossa style="deklaraatio;"

Deklaraatio eli selvitys, kuvaus tai tiedoksianto koostuu ominaisuudesta ja sen arvosta tyyliin ominaisuus: arvo, eli ominaisuus, kaksoispiste, välilyönti ja arvo ilman sitaatteja, ja niitä voi olla peräkkäin useita. Mittayksiköt merkitään aina mukaan ilman välilyöntiä. Arvo voi olla myös 0 tai miinusmerkkinen.

Deklaraatioiden tärkeysjärjestys on seuraava:

tyyliohjetiedostossa deklaraatio, jossa on merkintä !important
sivun tyyliohjeessa deklaraatio, jossa on merkintä !important
sivun tyyliohjeessa oleva tavallinen deklaraatio
tyyliohjetiedostossa oleva tavallinen deklaraatio
selaimen tyyliohjeessa oleva deklaraatio
selaimen alku- ja oletusarvot

Jos esimerkiksi tavalliselle perussolulle on tehty yhdenlaiset sisämarginaalit, saattaa toisen tyyppiselle solulle tehty toisenlaisen marginaalin sisältävä tyyliohje kumoutua, jolloin sen toiminta on varmistettava merkinnällä !important.

Periytyminen tarkoittaa sitä, että, jos jollekin elementin ominaisuudelle ei ole asetettu arvoa, se periytyy ympäröivältä elementiltä. Esimerkiksi jos solulle tai kappaleelle on määritelty fontin ominaisuudeksi Verdana, Arial, Helvetica, sans-serif; font-size: 8pt;, sille ei tarvitse tehdä erillistä fonttityyliohjetta eikä lisätä fonttitagia html-koodiin.

Tyyliohjetiedostossa samaan elementtiin kohdistuvat muotoilut erotetaan toisistaan puolipisteellä ja koko tyyliohje ympäröidään aaltosuluilla. Tyyliohjetiedostoon ei saa kirjoittaa sitaatteja. Pienikin kirjoitusvirhe on haitallinen. Jos tyyliohje ei toimi, on ensimmäiseksi syytä tarkistaa sen oikeinkirjoitus. Kaikki määritykset sekä tyyliohjetiedostossa että html-koodiin upotettuna kirjoitetaan pienillä kirjaimilla. Ääkkösiä ei saa käyttää.

Tyyliohjetiedostossa luokan nimeä edeltää piste, mutta html-koodiin sitä ei kirjoiteta, eikä tyyliohjetiedostossakaan alkuperäisiä html-luokkaselektoreja koskeviin luokkiin. Seuraavassa luokka on .smaller ja luokkaselektori p. Jälkimmäinen esimerkki koskisi kaikkia p-elementtejä.

.smaller   { font-family: Arial; font-size: 8pt; } 
<p class="smaller">tekstiä</p>

p   { font-family: Arial; font-size: 8pt; line-height: 16px; } 
<p>tekstiä</p>

Voi käyttää myös tunnisteselektoria #tunniste. Tunniste on tyyliohjeen nimi, joka liitetään valittuun elementtiin id-määritteellä, identification. Sama tunniste eli id voi esiintyä samalla sivulla useampaankin kertaan, sille ei saa antaa samaa nimeä kuin jollakin saman sivun linkillä on, mutta sekä luokalla että tunnisteella voi olla sama nimi, esimerkiksi .smaller tai #smaller.

Alla olevan ensimmäisen esimerkin mukaisesti sen voi liittää mihin tahansa elementtiin, jolle on annettu nimi col, ellei sitä ole erikseen määritelty koskemaan vain joitakin niistä. Jälkimmäinen esimerkki koskisi vain niitä div-elementtejä, joille on annettu nimi dots.

#col   { background-color: #E8E6AE; }
<span id="col">tekstiä</span>

div#dots   { font-family: Arial; font-size: 8pt; }
<div id="dots">tekstiä</div>

Tunnisteella ja luokalla ei ole mitään toiminnallista eroa, mutta tunnistetta käytetään yleensä vain yksittäistapauksille ja eri selaimien vaatimusten mukaisille hienosäädöille, jos yksi selain vaatii jonkin määrityksen ja toinen taas ei. Luokat sen sijaan koskevat kaikkia samoja elementtejä.

Html-koodin sisään upotetut paikalliset muotoilut ilmaistaan seuraavan esimerkin mukaisesti. Solunsisäinen marginaali kappaleen vasemmassa reunassa on 10 pikseliä ja rivinväli 18 pikseliä.

<p style="padding-left: 10px; line-height: 18px;">

Tyyliohjetiedoston luokkaan viitataan seuraavan esimerkin mukaisesti. Fonttiluokan määritykset voi liittää myös kappaleeseen tai soluun, mutta kappale- tai soluluokan määrityksiä ei voi liittää fonttiin. Pienempi mahtuu suurempaan, mutta ei päinvastoin.

<p class="eka"><font class="smaller">tekstiä</font></p>
<p class="eka smaller">tekstiä</p>

Luokkia voi yhdistää html-koodissa seuraavan esimerkin mukaan kirjoittamalla ne peräkkäin ja erottaen ne toisistaan välilyönnillä. Tässä solun leveys on 20 % taulukon leveydestä, siihen on yhdistetty taustakuva ja yksinkertainen reunaviiva:

<td class="c20 bg box">

Nämä kaikki luokat voisi myös yhdistää yhdeksi tyyliohjeeksi, mutta erillisinä niiden käyttöalue on laajempi.

Luokkaselektoreja voi yhdistää tyyliohjetiedostossa seuraavan esimerkin mukaan kirjoittamalla eri selektoreja peräkkäin ja erottaen ne toisistaan pilkulla. Määritys koskee elementtejä, jotka vastaavat ainakin yhtä selektoreista, tässä kaikkia niitä, joiden selektorina on joko ul tai font:

ul, font   { font-family: Arial; font-size: 8pt; }

Luokkien ja tunnisteiden nimet ovat vapaasti valittavissa tarkoituksen mukaan. Niiden on syytä kuvata tyyliohjetta helposti tunnistettavalla ja muistettavalla tavalla ja oltava mielellään lyhyitä. Ääkkösiä ei saa käyttää. Nimi ei saa alkaa numerolla eikä olla pelkkä numero, mutta se voi sisältää numeroita.

KOHDE

OMINAISUUS

ARVO

pseudoluokat = ei luokkaselektoria

a:link, a:visited, a:hover, a:active

Tekstilinkkien värit määritellään RGB-arvoina, jotka saadaan kuvankäsittelyohjelman värivalintaikkunassa. Linkin eri tiloille voi antaa myös muita arvoja, kuten lihavoinnin, kursivoinnin, taustavärin tai koon muutoksen. Ks. Internet Explorerin, Gecko-selainten tai Operan tyyliohje.

Lihavoinnin, kursivoinnin ja varsinkin pistekoon suurentamisen kanssa hover-tilassa on syytä olla varovainen, koska ne vievät enemmän tilaa kuin normaaliteksti. Linkki saattaa luiskahtaa seuraavalle riville, jolloin siitä ei saa kiinni ja teksin liikkuminen on muutenkin ikävän näköistä. Ne sopivat vain varmasti yhdellä rivillä pysyville linkkiluetteloille, joilla on tavallista suurempi rivinväli.

Linkkien automaattisen alleviivauksen voi poistaa poistamalla sen text-decorationilla (← linkki), text-decoration: none;, jolloin linkin tunnistaa vain kursorin muutoksesta ja värimäärityksistä. Sen voi tyyliohjeissa muuttaa myös vaikka pisteviivaksi lisäämällä alareunaviivamääritteen poistetun text-decorationin perään: text-decoration: none; border-bottom: dotted 1px;.

Se tuo alleviivauksen myös linkkikuviin eikä se poistu vain merkitsemällä html-koodiin reunan arvoksi 0, joka poistaa vain oletusarvoisen kehyksen, vaan samat CSS-määritykset on tehtävä erikseen linkkikuville reunaviivan arvolla 0: text-decoration: none; border-bottom: dotted 0px;. Pelkkä text-decoration: none; ei riitä.

tr, td, div, span, p

.examp :link, .examp :visited,
.examp :hover, .examp :active
#examp :link, #examp :visited,
#examp :hover, #examp :active

Linkeille voi määritellä omat värit myös jos sivuston eri sivuilla tai sivun eri kohdissa on tummia ja vaaleita taustavärejä, joilla sama linkkiväri ei näy. Silloin tehdään .exampille myös tyyliohje, johon voi tehdä samat määritykset kuin leipätekstin fonttimäärityksiinkin ja johon linkin kohdalla viitataan tilannekohtaisesti taustavärin vaatimusten mukaan <p class="examp">. Ks. Internet Explorerin, Gecko-selainten tai Operan tyyliohje.

Edellisessä siis olisi sama luokka eri nimellä kahteen kertaan. Vaihtoehtoisesti voi käyttää jälkimmäistä #tunniste-menetelmää ja antaa html-koodissa kohteelle nimen id="examp", jolloin erillistä tyyliohjetta ei tarvita. Ks. Internet Explorerin, Gecko-selainten tai Operan tyyliohje.

Examp on vain tämän esimerkin luokka ja nimi. Se voi olla mikä tahansa tilanteeseen sopiva, kunhan se on lyhyt eikä sisällä ääkkösiä, ei ala numerolla eikä ole pelkkä numero. Molemmissa esimerkeissä näkyvät samalla myös hover-tilan lihavoinnin seuraukset.

p, span

p:first-letter#eka
.eka:first-letter#eka
...

Koskee tämän esimerkin mukaan jokaisen kappaleen ensimmäistä kirjainta kun kappaleelle on annettu nimi eka. Tässä esimerkissä pistekoko on 16 pistettä ja väri vihreä. Toimii vain Internet Explorer 6.0+:lla ja muilla Trident-selaimilla. Ks. tyyliohje.

Anfangin voi tehdä myös tavanomaisesti tyyliohjeella eli määrittelemällä sille pistekoon, rivinvälin, fontin, värin, paksuuden ja kellumisen vasemmalle. Näin se toimii hyvin myös kaikilla muilla testiselaimilla. Ks. Internet Explorerin, Gecko-selainten tai Operan tyyliohje.

mikä tahansa luokkaselektori

td#hov:hover

Koskee niitä td-elementtejä, joille on annettu nimi id="hov" ja kursori on sen päällä. Taulukon, solun tai divin hoveriin voisi sijoittaa myös taustakuvan ja tehdä siihen erilaisia padding- ja fonttimäärityksiä. Toimii vain Gecko-selaimilla ja Operalla, joilla mikä tahansa elementti voi olla hover-tilassa. Ks. Gecko-selainten tai Operan tyyliohje.

#ex:hover

Sama kuin edellinen, mutta koskee mitä tahansa elementtiä, jolle on annettu nimi id="ex", tässä esimerkissä kappaletta. Hoveriin voisi sijoittaa myös taustakuvan ja tehdä erilaisia padding- ja fonttimäärityksiä. Toimii vain Gecko-selaimilla ja Operalla, joilla mikä tahansa elementti voi olla hover-tilassa. Ks. Gecko-selainten tai Operan tyyliohje.

p.indent

Koskee niitä p-elementtejä, jotka kuuluvat luokkaan indent.

div#box

Koskee niitä div-elementtejä, joille on annettu nimi id="box".

#box

Koskee mitä tahansa elementtiä, jolle on annettu nimi id="box".

Koskee kaikkia elementtejä.

asemointi
kaikki elementit

position

Static = ei asemointia, relative = suhteellinen, absolute = absoluuttinen, fixed = kiinteä, inherit = periytyvä. Elementin voi asemoida toisen elementin päälle. Määritykset tehdään asemoitavan elementin diviin, ei elementtiin itseensä.

z-index

1. Tämän 'kaverin' etäisyys tekstilaatikon oikeasta reunasta on IE:llä 2em ja alemman elementin yläreunasta -0.9em, z-indeksi 5 ja position relative. 'Kaveri' kelluu oikealle, jolloin alla oleva teksti kiertää sen.

Ilmaisu z-index tulee siitä, että taso, jolla elementit ovat, eli sivu, kuvitellaan 3-ulotteiseksi koordinaatistoksi, jolla on x- ja y-akselit ja kolmas ulottuvuus, z, on syvyyssuuntaan.

Z-index kertoo asemoitujen kerrosten järjestyksen. Sivun tasolla on arvo 0, joten ensimmäisen asemoidun elementin arvon on oltava vähintään 1, mutta mielellään 5 - 10 tai suurempi siltä varalta, että näiden elementtien väliin tulisi myöhemmin jotakin lisää. Jos asemoitavia elementtejä on vain kaksi, kuten tässä, ei ole tärkeätä, mitä suuruusluokkaa luvut ovat. Tärkeätä on vain se kumpi on suurempi eli päällimmäisenä.

Molemmissa esimerkeissä kuva on 24-bittinen *.png, että se uppoaa saumattomasti taustaan. Ks. myös Internet Explorerin, Gecko-selainten tai Operan tyyliohje.

top, right, bottom, left

Top, right, bottom ja left kertovat asemoidun elementin etäisyyden sen alla olevan elementin ylä-, ala-, oikeasta tai vasemmasta reunasta. Vain kaksi arvoa annetaan.

2. Tämä 'kaveri' ei kellu eikä teksti kierrä sitä, mikä vaikuttaa myös sen sijoitukseen. Sen etäisyys on IE:llä tekstilaatikon vasemmasta reunasta 6em ja alemman elementin yläreunasta 1.8em, z-indeksi 5 ja position relative.

Esimerkeissä tuo 'kaveri' on asemoitu tekstilaatikon päälle ja sijaitsee koodissa sitä ennen. Sekä 'kaveri' että tekstilaatikko on sijoitettu omiin diveihin päällimmäisten divien sisään, joille on määritelty leveydeksi 200px.

Internet Explorerilla ja Operalla esimerkin 2 tavalla jää yhdistelmän yläpuolelle suhteettoman paljon tilaa, minkä vuoksi päällimmäisen divin ylämarginaaliksi on tässä asetettu niinkin korkea arvo kuin -50px. Gecko-selaimilla elementit kuitenkin asettuvat oikein pienemmälläkin arvolla.

Esimerkin 2 'kaverin' sijainti kohdassa 6em vasemmalta aiheuttaisi Gecko-selaimilla vierityspalkin myös vaakasuuntaan ja Operakin vaatisi pientä henkilökohtaista hienosäätöä. Kauneusvirheiltä voi välttyä sillä, että molempien esimerkkien tyyliohjeet ovat erillisissä tiedostossa erilaisilla margin- ja em-arvoilla. Ks. Internet Explorerin, Gecko-selainten tai Operan tyyliohje.

Varsinkin tekstien yhteydessä kannattaa siis mieluummin kelluttaa, mikä toimii kaikilla testiselaimilla hyvin ja melko samalla tavalla.

background
body, table, tr, td, div, span, p

background-color

Värit määritellään RGB-arvoina.

background-image

Kuvan hakupolku, esimerkiksi url(kuvat/fingerprints.jpg). Ks. Internet Explorerin, Gecko-selainten tai Operan tyyliohje.

Yhdelle sivulle voi liittää vain yhden taustakuvan, mutta jos niitä tarvitsee useampia, voi sivulle lisätä sisäkkäisiä taulukoita tai divejä ja sijoittaa toiset taustakuvat niihin. Tässä kuva on sisätaulukon solun taustaan liitetty 24-bittinen *.png, että sen reunat eivät näkyisi.

Katso myös taustakuvan avulla tehty reuna hiukan alempana tällä sivulla.

background-repeat

Repeat ja no-repeat, x- ja y-akseleilla repeat-x ja repeat-y.

background-attachment

Taustakuvan kiinnitys taustaan: fixed tai scroll. Tämän sivun pääsolujen taustakuvat ovat fixed ja pysyvät sivua vieritettäessä koko ajan näkyvillä, edellisen background-image -esimerkin tausta on scroll ja pysyy koko ajan solun sisällä.

background-position

Left, top, right, bottom tai prosentteina: esimerkiksi 95% 10% kertoo kuvan paikan olevan 95 % vasemmasta reunasta ja 10 % yläreunasta, arvo 100% bottom tai 100% 100% on oikealla alhaalla ja top left tai 0% 0% vasemmalla ylhäällä.

border
table, tr, td, div, span, p, img src

border-color, border-top-color, border-right-color, border-bottom-color, border-left-color

Värin arvot järjestyksessä välilyönnillä erotettuina: ylhäällä, oikealla, alhaalla, vasemmalla eli kellon ympäri keskipäivästä alkaen.

border-style, border-top-style, border-right-style, border-bottom-style, border-left-style

Solid, dotted, dashed, double, groove, ridge, inset, outset. Esimerkit samassa järjestyksessä 3px mustalla reunaviivalla.

Reunaviivalla voi korostaa myös kappaletta joko yhdeltä reunalta tai ympäröidä koko kappaleen ja tehdä siihen margin-, padding- ja värimääritykset ilman, että se sijoitettaisi diviin.

Arvot ilmaistaan järjestyksessä välilyönnillä erotettuina: ylhäällä, oikealla, alhaalla, vasemmalla. Arvo dotted toimii 1px hiuslinjana oikein pisteviivana kaikilla muilla testiselaimilla, paitsi Internet Explorerilla, jolla se näkyy katkoviivana ja oikein pistelinjana vasta resoluutiolla 1280 x 1024.

Katso myös kuvan kehysten passe-partout -esimerkki HTML-sivulta.

border-width, border-top-width, border-right-width, border-bottom-width, border-left-width

Thin, medium, thick tai pikselimitta. Jokaiselle reunalle voi antaa erilaisen mitan välilyönnillä erotettuina järjestyksessä: ylhäällä, oikealla, alhaalla, vasemmalla.

background-image

Taustakuvan avulla tehty reuna 1.

Kehyksen voi tehdä myös kuvan avulla, mikä ei ole varsinainen border-ominaisuus eikä border-määritystä ole mainittu IE:n, Gecko-selainten ja Operan tyyliohjeissa ollenkaan.

Ensimmäisessä esimerkissä on sisäkkäin kaksi diviä, joiden välinen marginaali on taustakuvana käytetyn kuvan levyinen, eli sisempi div on 2 x kuvan leveyden verran pienempi.

Kaikkien mittojen on välttämätöntä olla pikselimittoja, koska taustan on oltava tasan kuvan koon moninkerta, että se säilyy kokonaisena. Ks. Internet Explorerin, Gecko-selainten tai Operan tyyliohje.

Taustakuvan avulla tehty reuna 2.

Taustakuva voi olla myös suurempi, jolloin marginaalin koolla ei ole väliä ja sisempi div voisi myös olla vaikka läpinäkyvä.

Taustakuvan on myös siksi hyvä olla alimmaista diviä suurempi, että se ei alkaisi toistua tai loppuisi kesken. Tässä tapauksessa mittojen ei välttämättä tarvitse olla pikselimittoja.

Molemmat esimerkit toimivat hyvin Internet Explorerilla, mutta muilla testiselaimilla IE:lle sopivilla pikselimitoilla tehtynä tämän esimerkin oikea ja alareuna leikkautuvat näkymättömiin. Ks. Internet Explorerin, Gecko-selainten tai Operan tyyliohje.

Taustakuvan avulla tehty reuna 3.

Useammalla sisäkkäisellä divillä eri taustakuvilla saa aikaan leveämmän ja koristeellisemman kehyksen. Tässä on kolme eri taustakuvaa kolmessa sisäkkäisessä divissä. Prosenttimitoilla näin voisi kehystää vaikka koko sivun.

Esimerkki toimii myös hyvin Internet Explorerilla, mutta muilla testiselaimilla IE:lle sopivilla pikselimitoilla tehtynä sisin div peittäisi oikealla ja alhaalla myös kaksi edellistä diviä ilman Operan ja Gecko-selainten tyyliohjetiedostojen hiukan erilaisia arvoja. Prosenttimitoilla se toimii hyvin. Ks. Internet Explorerin, Gecko-selainten tai Operan tyyliohje.

cursor
kaikki elementit

cursor

Auto, crosshair, default, pointer tai hand, wait, text, progress, help, move ja url(osoite).

Animoiduksi kuvatiedostoksi sopii *.svg tai *.ani. Animoitu kursori toimii Internet Explorer 6.0+:lla.

Erilaisia siirtoja osoittavia kursoreita ovat e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize ja w-resize.

Siirtojen lyhenteet tulevat englanninkielisistä ilmansuunnista: north, north-east, east, south-east, south, south-west, west ja north-west. Vastakkaisten ilmansuuntien kursorit ovat samanlaisia ja on sama kumpia käyttää.

float
div, img src

float

Left, right, none. Kelluvat elementit, joilla saadaan aikaan tekstinkierrätys, kuvateksti ja saman solun tekstin ja kuvan tasaaminen samalla rivillä samanaikaisesti vasemmalle ja oikealle. Kelluva elementti sijoitetaan koodissa sen elementin yläpuolelle, jonka viereen se näytöllä halutaan. Toimii hyvin kaikilla testiselaimilla. Ks. Internet Explorerin, Gecko-selainten tai Operan tyyliohje.

Kierrätys voidaan tarvittaessa lopettaa sijoittamalla tekstikappaleen loppuun html-koodi <br clear="all"> tai CSS:llä <br style="clear: all;">, jolloin seuraava kappale alkaa vasta kierretyn elementin alapuolelta.

Kierrätyksen voi lopettaa myös vain jommaltakummalta puolelta html-koodeilla <br clear="left"> ja <br clear="right"> tai CSS:llä <br style="clear: left;"> ja <br style="clear: right;">.

font
body, table, td, p, div, span

font-family, font-size, font-style, font-variant, font-weight, color

Fontin ominaisuudet.

font-family

Fontin nimi ja sen vaihtoehdot erotettuina pilkulla toisistaan.

Esimerkiksi näillä sivuilla font-family: Verdana, Arial, Helvetica, sans-serif;. Päätteellisille fonteille, esimerkiksi Times New Romanille tai Georgialle, merkitään lisäksi serif ja Courierille monospace.

font-size

xx-small, x-small, smaller, small, medium, large, larger, x-large, xx-large, pistekoko, em-mitta tai prosenttiluku.

Määritykset toimivat eri selaimilla ristiriitaisesti ja umpimähkäisen eri tavoin eivätkä kaikki arvot kaikilla selaimilla ollenkaan, joten kannattaa käyttää vain em- tai pt-mittoja.

Nämä koot ilmaisevat fontin koon suhteessa sivulla käytettyyn pistekokoon. Tässä esimerkit tämän sivun pistekoon 8pt mukaan. IE:llä small on selvästi suurempaa kuin ympäröivä teksti, medium on jossakin suurempi, jossakin myös lihavoitu, x- ja xx-small ovat kaikilla saman kokoisia eikä xx-large toiminut yhdelläkään testiselaimella. Larger on ainoa joka toimii kaikilla testiselaimilla oikein ja samalla tavalla.

Huomaa että tämä smaller on eri asia kuin tämän sivuston tyyliohjetiedoston luokka .smaller.

xx-small
x-small
smaller
small
medium
large
larger
x-large
xx-large

font-style

Normal, italic tai oblique eli vino = kursiivi.

font-variant

Normal, small-caps eli kapiteeli, ja inherit eli periytyy ympäröivältä elementiltä.

Kapiteeli toimii kaikkien testiselainten uusimmilla versioilla. Muotoiltava teksti on kirjoitettava normaalitekstin tapaan pienillä kirjaimilla. Kapiteeli edellyttää myös hiukan suurempaa pistekokoa ja Operalla ja Chromella selvästi suurempaa kuin IE:llä ja Firefoxilla. Vrt. text-transformilla tehty kapiteeli.

font-weight

Normal, bold, bolder, lighter, inherit, 100, 200, 300, 400, 500, 600, 700, 800, 900.

Lukuarvo 600 on Arialilla hiukan leveämpi kuin strongilla tai boldilla määritelty 600, mutta Verdanalla ei ole oikeastaan mitään eroa. Muut lukuarvot eivät toimi Verdana- ja Arial-fonteilla millään testiselaimella.

Bolder ja lighter tarkoittavat fontin kokoa verrattuna normaalitekstiin. Verdana- ja Arial-fonteilla bolder näyttää tavalliselta lihavoidulta eikä lighterilla näy mitään muutosta.

color

Värit määritellään RGB-arvoina. Tyyliohjeeseen kirjoitetaan pelkkä color eikä font-color, niin kuin kaikkiin muihin fonttimäärityksiin.

height
table, td, div, img src

height

Elementin korkeus: em-mitta, pikselimitta, prosenttiluku, auto.

letter-spacing
span, p, font

letter-spacing

Normal ja em-mitta. Tekstin välistys eli harvennus tai tiivistäminen.

Edellä harvennus 0.1em ja tiivistäminen -0.07em. Jos harventaa kirjaimia on harvennettava myös sanaväliä ja rivinväliä. Ks. seuraavassa line-height. Arial-fontti vaatii tiivistämiseen hiukan pienemmän arvon kuin Verdana ja harvennukseen hiukan suuremman. Toimii kaikilla testiselaimilla myös miinusmerkkisillä arvoilla, mutta eri selaimet vaativat hiukan erilaisia arvoja.

line-height
p

line-height

Normal, em-mitta, pikselimitta tai prosenttiluku.

Rivinväli ei tarkoita rivien väleissä olevan tyhjän tilan korkeutta, vaan rivin keskialueen ala- tai yläreunan etäisyyttä seuraavan rivin keskialueen ala- tai yläreunasta. Tämän sivuston leipätekstin rivinväli on 18 pikseliä.

list-style
ul, ol, li

list-style-image, list-style-position, list-style-type

Luettelomerkkien ominaisuudet.

list-style-image

Url-viittaus, luettelomerkkikuvan hakupolku: url(kuvat/dotop.png).

toimii hyvin kaikilla testiselaimilla
luettelomerkkikuvat kannattaa tehdä vähintään *.gif-muodossa tai mieluummin 24-bittisessä *.png-muodossa, että niiden reunat eivät mahdollisen taustakuvan kanssa näkyisi
ks. Internet Explorerin, Gecko-selainten tai Operan tyyliohje

Värillinen luettelomerkki.

luettelomerkille saa myös eri värin määrittelemällä listalle haluamansa muun värin ja tekstin alueena (span) erikseen mustaksi
ks. span sivulta HTML

list-style-position

Inside, outside.

inside-määrityksessä luettelomerkkikin sisentyy tekstin kohtaan ja pysyy tekstin sisällä
tätä ei oikeastaan kannata käyttää koska vastaavan toiminnon saisi aikaan myös vaikka erikoismerkillä • eli •
outside-määritys tekee tekstinkäsittelyohjelmien tapaan ns. riippuvan sisennyksen ja luettelomerkki pysyy tekstin ulkopuolella
lopputulos on selkeämpi

list-style-type

Decimalista eteenpäin ul vaatisi hiukan enemmän ja/tai li hiukan vähemmän sisennystä kaikilla muilla testiselaimilla paitsi Operalla, Chromella ja Safarilla. Roomalaisiin numeroihin tulee väkisinkin järjestysluvun piste, jota ne eivät kuitenkaan vaatisi, koska jo ovat järjestyslukuja.

Molempien esimerkkien listana on ul. Ks. ul ja ol tarkemmin HTML-sivulta ja sivuston listaelementtien määritykset Internet Explorerin, Gecko-selainten tai Operan tyyliohjeesta.

disc = pallo
circle = rengas
square = neliö
decimal = numerointi
lower-roman = i, ii, iii, iv ...
upper-roman = I, II, III, IV ...
lower-alpha = gemena
upper-alpha = versaali
none = ei mitään

margin
div, span, p, img src

margin-top, margin-right, margin-bottom, margin-left

Ylämarginaali, oikea marginaali, alamarginaali, vasen marginaali.

Em-mitta, pikselimitta, prosenttiluku, auto. Marginaalin koko järjestyksessä välilyönnillä erotettuina: ylhäällä, oikealla, alhaalla, vasemmalla. Vain yksi mitta määrää kaikki marginaalit saman kokoisiksi ja myös miinusmerkkiset arvot toimivat. Esimerkiksi divissä margin on sen ulkopuolinen marginaali ja padding sen sisäpuolinen täyte.

overflow
body, td, div

overflow, overflow-x, overflow-y

Visible, hidden, scroll, auto, inherit.

Vierityspalkit esimerkiksi diveihin tai pop-up-ikkunoihin. Divien tulosteessa näkyy vain kerralla näkyvissä oleva osa. Isolla sivulla vaakasuoran vierityspalkin voi piilottaa kirjoittamalla tyyliohjeeseen overflow-x: hidden. Ei toimi pop-up -ikkunoissa Internet Explorer 6.0+:lla, vierityspalkit on merkittävä niiden JavaScript-koodiin.

padding
div, span, p, img src

padding-top, padding-right, padding-bottom, padding-left

Ylätäyte, oikea täyte, alatäyte, vasen täyte

Em-mitta, pikselimitta, prosenttiluku, auto. Täytteen koko järjestyksessä välilyönnillä erotettuina: ylhäällä, oikealla, alhaalla, vasemmalla. Vain yksi mitta määrää kaikki täytteet saman kokoisiksi ja vain plusmerkkiset arvot toimivat. Esimerkiksi divissä padding on sen sisäpuolinen täyte ja margin sen ulkopuolinen marginaali.

scrollbar
html

scrollbar-3dlight-color, scrollbar-arrow-color, scrollbar-base-color, scrollbar-darkshadow-color, scrollbar-face-color, scrollbar-highlight-color, scrollbar-shadow-color, scrollbar-track-color

Vierityspalkin värit. Ei toimi Gecko-selaimilla eikä Operalla. Ks. tyyliohje.

scrollbar-3dlight-color

Vierityslaatikon ja vieritysnuolia ympäröivien neliöiden ylä- ja vasen reuna.

scrollbar-arrow-color

Vieritysnuolet.

scrollbar-base-color

Vierityslaatikko ja vieritysnuolia ympäröivä laatikko.

scrollbar-darkshadow-color

Vierityslaatikon ja vieritysnuolia ympäröivän laatikon oikea ja alareuna.

scrollbar-face-color

Vierityslaatikko ja nuolet.

scrollbar-highlight-color

Vierityslaatikon yläreuna ja vasen reuna.

scrollbar-shadow-color

Vierityslaatikon alareuna ja oikea reuna.

scrollbar-track-color

Ura.

page-break
ei kelluville elementeille

page-break-before, page-break-after, page-break-inside

Sivunvaihdon säätely tulosteessa. Toimii hyvin Internet Explorerilla.

page-break-before

Auto, always, avoid. Sivunvaihto tulosteessa ennen elementtiä.

page-break-after

Auto, avoid. Sivunvaihto tulosteessa elementin jälkeen.

page-break-inside

Auto, avoid. Kehottaa selainta välttämään sivunvaihtoa elementin sisällä.

text
td, div, span, p, font

text-align, text-decoration, text-indent, text-transform

Tekstin ominaisuuksia.

text-align

Tekstin tasaus vaakasuunnassa: left, right, center, justify.

Molempien reunojen tasausta ei verkkosivuilla kannata käyttää, koska suomen kielen sanat ovat siihen tarkoitukseen liian pitkiä ja tekstiin jää ikäviä aukkoja. Tekstinkäsittelyssä tasauksen yhteydessä on aina lisättävä automaattinen tavutus.

text-decoration

None, underline, overline, line-through, blink.

Blink ei toimi Internet Explorerilla eikä Safarilla. Safarilla alleviivaus tulee selvästi lähemmäksi tekstiä kuin muilla selaimilla, mutta yhtä ohuena kuin IE:llä.

text-indent

Ensirivin sisennys: em-mitta, pikselimitta, prosenttiluku. Myös miinusmerkkiset arvot toimivat.

text-transform

None, capitalize, uppercase, lowercase.

Lauseen jokaisen alkukirjaimen muuntaminen kapiteeliksi tai koko lauseen muuntaminen versaaliksi tai GEMENAKSI. Vrt. font-variantilla tehty kapiteeli. Toimii kaikkien testiselainten uusimmilla versioilla.

vertical-align
td, div, span, p

vertical-align

Tekstin tasaus pystysuunnassa: baseline, sub, super, top, text-top, middle, bottom, text-bottom tai prosenttiluku.

widows, orphan
p, h1 - h6

widows, orphan

Kokonaisluku eli leski- ja orporivien vähimmäismäärä tulosteessa. Leski- ja orporivien esto. Ei toimi Internet Explorerilla.

width
td, div, p, img src

width

Elementin leveys: em-mitta, pikselimitta, prosenttiluku, auto.

word-spacing
span, p, font

word-spacing

Normal, em-mitta. Sanaväli normaalin sanavälin lisäksi. Toimii kaikkien testiselainten uusimmilla versioilla myös miinusmerkkisillä arvoilla.

MUUTA

pyöristetyt kulmat

Koodin käyttölupa kaikkeen ei-kaupalliseen käyttöön.

1. Pystysuuntaan joustava tekstilaatikko ilman kuvia. Toimii tällä sivulla hyvin kaikilla muilla testiselaimilla paitsi IE:llä, jolla kulmat toimivat ehkä sekunnin ja sitten leviävät.

Nämä kaksi ensimmäistä esimerkkiä toimivat huonosti tällä sivustolla IE:llä, minkä syynä saattaa olla yhteensopivuusongelma tämän sivuston tavanomaista useampien JavaScriptien ja tyyliohjeiden kanssa juuri tällä selaimella, koska pop-up -ikkunassa molemmat toimivat hyvin myös IE:llä.

Katso IE:lläkin toimivat samat esimerkit pop-up -ikkunassa.

Koodin käyttölupa sekä yksityiseen että kaupalliseen käyttöön.

2. Joka suuntaan joustava tekstilaatikko ilman kuvia. Tämä esimerkki toimii tällä sivulla hyvin kaikilla muilla testiselaimilla paitsi IE:llä, jolla kulmat toimivat ehkä sekunnin ja sitten leviävät.

CSS, moz-border-radius

3. Tämän tekstilaatikon pyöreät kulmat näkyvät vain Firefoxilla, Flockilla, Netscapella ja SeaMonkeylla, mutta eivät Chromella ja Safarilla, IE:llä ja Operalla.

Koodin käyttölupa yksityiseen ja ei-kaupalliseen käyttöön, ei mihinkään epäeettisiin tarkoituksiin.

Tällä JavaScriptillä voi tehdä kuvaan pyöreät kulmat ja varjon. Toimii hienosti kaikilla testiselaimilla. Sisältää myös monia muita efektejä. Tällaista kuvaa ei voi kopioida eikä tallentaa eikä siinä toimi alt-teksti.

Pyöreitä kulmia ja muitakin efektejä kuviin saa aikaan myös kuvankäsittelyohjelmilla.

► Esimerkiksi Corelin PhotoPaintilla tehty koirankorva on selvästi luonnollisempi ja kauniimpi kuin JavaScriptillä tehty.

läpinäkyvyys

CSS, filter:alpha

Sopisi sivun tekstialueen taustalle, jos koko sivun taustakuvassa on paljon yksityiskohtia. Solun tai divin taustan transparenssi periytyy kuitenkin kaikkiin saman solun tai divin elementteihin, myös kuviin, mikä tummentaa tai vaalentaa niitä.

Hyvä ja helppo ohje löytyy mm. osoitteesta CSS Transparency. Ks. myös Internet Explorerin, Gecko-selainten tai Operan tyyliohje ja sivua Työvaiheet. Toimii hyvin kaikilla testiselaimilla.

Kuvankäsittelyvaihtoehto

Transparentin voi tehdä myös yksinkertaisesti tekemällä solulle tai diville 1-värisen, toistuvan taustakuvan vähentäen sen opasiteettia ja tallentamalla se 24-bittisessä *.png-muodossa. Tällöin koko sivun taustakuva kuultaa läpi, mutta sivun muut kuvat säilyttävät värinsä. Toimii hyvin kaikilla testiselaimilla.