Tyyliarkit
Tyyli on yksi valheen laji. Se on koriste, joka peittää rakenteen.
Peter Ustinov
Porrastetuilla tyyliarkeilla (CSS, Cascaded Style Sheets) määritellään WWW-sivujen ulkoasu. Niiden avulla on helppo määritellä laajoillekin sivustoille yhtenäinen muoto. Kun ulkoasu ja asiakirjojen sisältö ovat erillään, sivujen ylläpito on helpompaa ja HTML-koodi on yksinkertaista ja nopeasti latautuvaa. CSS-standardi sisältää myös muotoiluja, jotka puuttuvat HTML-määrittelystä.
Jokaiseen HTML-asiakirjan rakenteeseen eli elementtiin (kappaleet, otsikot, taulukon solut jne.) voidaan liittää useita tyylimäärittelyjä. Seuraava tyylisääntö määrittelee otsikkotyypeille <h1> ja <h2> punaisen värin ja kohdistuksen keskelle:
h1, h2 {color: #ff6600; text-align: center}
Määrittelyt erotetaan toisistaan puolipisteillä. Välilyönneillä ja rivinvaihdoilla ei ole tulkinnan kannalta merkitystä, mutta niillä voi selventää koodia.
Tyylimäärittely voidaan liittää dokumenttiin eri tavoin. Koko asiakirjan tyyli voidaan määritellä style-rakenteella <head>-osiossa. Tyylimäärittelyjä voi myös liittää yksittäiseen asiakirjan rakenteeseen. Suositeltavin tapa on kuitenkin määritellä koko sivun tyyli linkittämällä ulkoinen tyylitiedosto. Näin useampi sivu voi käyttää samoja tyylimäärityksiä. Kun tyylimääritys ja tekstit ovat eri tiedostoissa, niiden muuttaminen erikseen on helpompaa.
Tämän sivun <head>-osiossa määritellään ulkoinen tyylitiedosto teksti.css:
<head>
<title>Porrastetut tyyliarkit</title>
<link rel="stylesheet" type="text/css" href="css/teksti.css">
</head>
Kuten linkissäkin, tyylitiedoston viittauksen on oltava täsmälleen oikein. Tässä käytetään suhteellista viittausta: tiedosto on tämän hakemiston alihakemistossa nimeltä css.
Tyylitiedostoon voit kirjoittaa kommentteja, joilla muistutat itsellesi, mikä kirjoittamiesi komentojen tarkoitus on.
/* Kommentit tiedostoa lukevalle kirjoitetaan näin. */
Tässä on esimerkki erillisestä tyyliarkista. Voit kopioida sen leikepöydälle ja tallentaa omaan kansioosi muokattavaksi. Kun muutat sisältöä, muista muuttaa myös kommentit tai poista ne kokonaan.
/* Ei marginaalia, taustaväri valkoinen */
html {margin:0; background:#ffffff}
/* Marginaali määritellään järjestyksessä ylhäältä alkaen vastapäivään: ylä- ja alareunassa 2 m-kirjaimen leveyttä, oikealla ja vasemmalla 10 % sivun leveydestä. Sama fontti on käytössä koko sivulla. */
body {margin:2em 10% 2em 10%; color:#000000; background:transparent; font:1em "Verdana" "Tahoma" "Arial" "Helvetica" sans-serif}
/* Määritellään linkkien ulkoasu. Kun hiiri viedään linkin päälle, se vaihtaa väriä */
a, a:link, a:visited{color:#003366; background:transparent; text-decoration:underline}
a:hover, a:focus, a:active {color:#0000ff; background:transparent; text-decoration:underline}
/*Otsikot: määritellään tila otsikon ylä- ja alapuolelle; fontin koko suhteessa normaalin tekstin kokoon;pääotsikko keskitetty, valkoinen sinisellä pohjalla. */
h1 {margin:0 1em 1em 0em; text-align:center; font:200%; color:#ffffff; background:#003366}
h2 {margin:1em 0em 2em 0em; font:180%}
h3 {margin:2em 0em 1em 0em; font:150%}
h4 {margin:2em 0em 1em 0em; font:120%}
h5 {margin:2em 0em 1em 0em; font:italic 110%}
h6 {margin:2em 0em 1em 0em; font:80%}
/*Kuvat kelluvat oikeassa reunassa. Teksti kiertää kuvan ympäri.*/
img {float:right; margin:1em 0 1em 2em}
/*Tekstikappaleessa riviväli on 1,5. Kappale tasataan molemmista reunoista (tasaus ei toimi hyvin, jos ikkuna on kapea.)*/
p {margin:1em 0em 1em 0em; text-align:justify; font:1em/150%}
td {line-height:1}
/* Luetteloissa tekstin koko on normaali ja riviväli 1.*/
ul {margin:0em 0em 0em 3em; font:1em/100%}
ol {margin:0em 0em 0em 3em; list-style:decimal; font:1em/100%}