JWT 2015 - Johdatus www-tekniikoihin
© Aulikki Hyrskykari, Antti Sand, 2015 - Kopiointi ilman lupaa kielletty.

4. CSS

CSS-tyylipohjakieltä alettiin käyttää vasta kun www-sivuja oli jo kirjoitettu HTML:llä useampia vuosia. Aiemmissa HTML-merkkauskielen versioissa on ollut muotoiluun liittyviä elementtejä ja attribuutteja, kuten esimerkiksi font, br ja center, mutta HTML5-versiosta ne on poistettu. HTML 5 -elementit eivät siis sisällä sivun ulkomuotoon tai esittämiseen liittyvää tietoa — kaikki muotoilutieto annetaan erillisissä CSS-tyylipohjadokumenteissa, CSS-muotoilusääntöinä (poikkeuksena kuvan widht ja heigth-attribuutit).

4.1 Taustaa

CSS-sääntöjä on olemassa useampia kerroksia (levels), ts. CSS:stä ei ole julkaistu uusia versioita, vaan uusi CSS-kerros on aina tuonut kieleen lisää tyylisääntöjä.

Ensimmäisen kerroksen tyylisäännöt CSS1 julkaistiin vuonna 1996. CSS2 julkaistiin jo heti sen jälkeen 1997, mutta se korvatiin tarkistetulla versiolla CSS2.1. Sen kehitystyö saatettiin päätökseen vasta 2011: W3C Recommendation CSS2.1 julkistettiin kesällä 2011.

CSS2:n rinnalla kehitettiin seuraavan kerroksen, CSS3:n, sääntöjä jo vuodesta 1998 lähtien, tosin ajoittain kehittely oli laimeaa. Uusien selainten ilmaantuminen markkinoille, sai CSS3 kehityksen aktivoitumaan jälleen muutamia vuosia sitten. CSS2.1:n saattaminen stabiiliin vaiheeseen kesti niin kauan, että CSS3:a ei enää haluttu kehittää isona monoliittisena kokoelmana tyylisääntöjä, vaan CSS3 jaettiin useampaan moduuliin, joista kukin toteuttaa tiettyyn aihepiiriin liittyvät säännöt. CSS3-moduuleista on jo tällä hetkellä standardoitu värit, nimiavaruudet, valitsimet ja mediakyselyt.

Tyylipohjakielen nimi, CSS (Cascading Style Sheets), tulee piirteiden putousmaisesta (cascade = vesiputous) periytymisestä DOM-hierarkiassa äidiltä lapselle, ts. piirteiden periytyminen ympäröivältä elementiltä. Periytyminen on kuitenkin piirrekohtaista, kaikki piirteet eivät ole periytyviä.

Takaisin ylös

4.2 CSS-sääntöjen syntaksi

Suositeltavin tapa on kirjoittaa tyylisäännöt erilliseen *.css -tiedostoon ja liittää tiedosto HTML-dokumenttiin otsikko-osassa <link>-elementin avulla. Usein saattaa olla järkevää kirjoittaa useampia tyylitiedostoja, jolloin tiettyyn dokumentiin on helpompi liittää vain kulloinkin tarpeelliset tyylitiedostot. Useampien tyylitiedostojen liittäminen tapahtuu seuraavasti:

<!DOCTYPE html>
<html lang="fi">
<head>
  <meta charset="UTF-8" />
  <title>Sivun otsikko</title>
  <link rel="stylesheet" type="text/css" href="polku/perustyylit.css" />
  <link rel="stylesheet" type="text/css" href="polku/navigointi.css" />
  <link rel="stylesheet" type="text/css" href="polku/erityiset-tyylit.css" />
 ...

Tyylisääntöjä voi myös kirjoittaa suoraan HTML-dokumentin otsikko-osaan <style> elementtiä käyttäen, esimerkiksi seuraavasti:

<!DOCTYPE html>
<html lang="fi">
<head>
  <meta charset="UTF-8" />
  <title>Sivun otsikko</title>
   <style type="text/css">
       body {
         background-color:maroon;
         margin-left:20px;
       }
       p { color:white; }
    </style>  ...

Säännön voi myös kirjoittaa dokumentin runkoon, suoraan elementtiin style-attribuuttia käyttäen, jolloin valitsin jää pois, koska kohde-elementtiä ei tarvitse määritellä.

<p style="color:sienna; margin-left:20px">
   This is a paragraph.
</p>

Nämä vaihtoehdot eivät ole toisiaan poissulkevia, jos samalle elementille on kohdistettu tyylisääntöjä erillisessä tyylitiedostossa, dokumentin otsikko-osan <style>-elementissä ja dokumentin runko-osassa suoraan elementille  style -attribuutin avulla, elementin näyttämiseen käytetään sitä sääntöä, joka on lähimpänä elementtiä. Yhteentörmäystilanteessa elementtiin kirjoitettu sääntö siis kumoaa otsikko-osan säännön, joka edelleen kumoaa mahdollisen tyylitiedostossa annetun säännön.

Ensimmäinen esitellyistä tyylien esittämistavoista on suositeltavin, kahta muuta tulisi käyttää vain poikkeustilanteissa. Kaksi jälkimmäistä tapaa eivät ole sen perusperiaatteen mukaisia, että html-dokumentti kuvaa vain sisällön ja tyylitiedosto ulkoasun. Jälkimmäiset tavat ovat erityisesti käteviä tapoja dokumentin luontivaiheessa, kun haluaa nopeasti kokeilla jonkun säännön vaikutusta dokumenttiin.

4.2.2 CSS-säännön syntaksi

CSS-tyylitiedosto muodostuu jonosta CSS-sääntöjä (CSS rule), jossa valitsin (selector) määrää, mihin HTML 5 -elementtiin säännön esittely (declaration) kohdistuu.

Jos sama sääntö halutaan kohdistaa useammalle kohteelle, kohteet luetellaan listana valitsimia, pilkulla toisistaan eroteltuna.

Esittelyt koostuvat piirteistä (properties) ja niille annettavista arvoista (values). Koko esittelyjen luettelo suljetaan aaltosulkuhin ja ne erotetaan toisistaan puolipisteellä. Esittelyn voi myös ajatella päättyvän puolipisteeseen, joten viimeisenkin esittelyn jälkeen saa olla puolipiste, mutta se ei ole pakollinen. CSS-tyylisääntöjen esittelyjen yleinen syntaksi on siten seuraavanlainen.

css-säännön syntaksi

Esimerkki CSS-säännöstä, jossa sama sääntö kohdistetaan useammalle elementille (sekä ykkös- että kakkostason otsikot kirjoitetaan sinisellä värillä):

h1, h2 {    
  color: blue;
}

ja säännöstä, jossa on useampia esittelyjä (sivun tekstin värin ja taustavärin määrittäminen) :

body {    /* tekstin ja taustan väri */
  color: purple;
  background-color: silver;
}

Kommentit CSS-tyylimäärittelyissä kirjoitetaan /* */ merkkiparin väliin. Yllä oleva on vain esimerkki kommentista - liian tarkka kommentointi ei ole järkevää. Yksittäisten selitysten sijasta kommentteja kannattaa käyttää tyylitiedoston logiikan ja rakenteen selkeyttämiseksi.

Säännön kohde-elementti määritellaan valitsimen avulla. Tarkastellaan seuraavassa ensin millaisia valitsimet voivat olla, ja sen jälkeen tarkemmin sitä, mitkä kaikki asiat vaikuttavat siihen, mikä sääntö yhteentörmäystilanteessa on voimassa elementin esittämisessä.

Takaisin ylös

4.3 Valitsimet

Valitsin määrittää sen, mihin dokumenttipuun elementtiin tyylisääntö kohdistuu. Valitsimen voidaan ajatella olevan hahmo (pattern), jota haetaan dokumenttipuusta, ja sääntö kohdistetaan elementtiin tai elementteihin, johon hahmonhaku sopii (pattern matches). CSS2.1:ssä voidaan käyttää seuraavanlaisia valitsimia:

Valitsin Hahmo Sopii
Elementtivalitsin ekaikkiin <e>-elementteihin
Luokkavalitsin .luokka kaikkiin elementteihin, joilla on class-attribuutti "luokka", ts. (class="luokka")
id-valitsin #tunnus kaikkiin elementteihin, joilla on id-attribuutti, jolla on arvo "tunnus", ts. (id="tunnus")
Kontekstinen valitsin e1 e2 kaikkiin elementteihin <e2>, joilla on <e1>-elementti äitinä tai esivanhempana
Lapsivalitsin e1>e2 kaikkiin elementteihin <e2>, joilla on <e1>-äitielementti
Nuorempi sisarus -valitsin e1+e2 kaikkiin elementteihin <e2>, joita välittömästi edeltävä sisarus on on <e1>-elementti
Attribuuttivalitsin e[att]
e[att=val]
e[att~=val]
e[att|=val]
kaikkiin elementteihin <e>, joilla on:
att-attribuutti,
att-attribuutti, jolla on vain arvo "val"
att-attribuutti, jonka arvoista yksi on "val"
att-attribuutti, jonka arvo alkaa merkkijonolla val ja jota voi seurata tavuviiva ja lisää merkkejä
Pseudoluokkavalitsin :link
:visited
:hover
:active
:focus
:first-child
:lang
elementteihin, joille hahmohaun perusteena on muut elementin ominaisuudet kuin elementin nimi, käytetyt attribuutit tai niiden sisällöt.
Pseudoelementtivalitsin ::before
::after
::first-letter
::first-line
elementteihin, joille hahmohaun perusteena on muut elementin ominaisuudet kuin elementin nimi, käytetyt attribuutit tai niiden sisällöt.
Universaalivalitsin * kaikkiin elementteihin.

4.3.1 Elementtivalitsin ja valitsinlista

Elementtivalitsin on valitsimista yksinkertaisin. Se muodostuu elementin nimestä, seuraava sääntö sisentäisi kaikkia dokumentin kappaleille 10 pisteellä.

p {    
  padding-left: 10px;
}

Jos samaa sääntöa sovelletaan useampaan elementtiin, ne luetellaan pilkulla toisistaan eroteltuna. Ensimmäisen ja toisen tason otsikoihin liitetyt samanlaiset säännöt

h1 {    
  color: purple;
  font-weight: bold;
}
h2 {    
  color: purple;
  font-weight: bold;
}

Voitaisiin siis esittää lyhemmin seuraavasti

h1, h2 {    
  color: purple;
  font-weight: bold;
}

[W3C] [MDN] [W3School]

4.3.2 Luokkavalitsin ja luokiteltu elementtivalitsin

Jos sääntö halutaan kohdistaa tiettyihin elementteihin, jotka eivät välttämättä ole edes samantyyppisiä, voidaan käyttää HTML-elementtien attribuuttia class elementtien ryhmittelyyn. Jos esimerkiksi halutaan esittää tärkeä teksti vahvennettuna ja punaisella värillä, voidaan nämä tekstin osat sijoittaa elementteihin, joille määritellään class="tarkea". CSS-sääntö voidaan nyt kirjoittaa muodossa.

.tarkea {
  color: red;
  font-weight: bold;
}

HTML dokumentissa tärkeä viesti merkittäisiin seuraavasti:

<p>
   Tämä teksti on muuten ihan tavallista, mutta 
   <span class="tarkea">huomaa erityisesti tämä tärkeä asia</span>. 
   Joskus tärkeää voi olla koko kappale, jolloin piirre voidaan antaa 
   koko <p>-elementille, kuten seuraavasssa kappaleessa on tehty.
</p>

<p class="tarkea">
   Tämä kappale on kokonaisuudessaan aivan
   erityisen tärkeä. 
</p>

Yhteen elementtiin voi kohdistaa useampia luokkavalitsinta käyttäviä CSS-sääntöjä. Tällöin class-attribuutin arvoksi annetaan halutut luokan nimet välilyöntimerkillä toisistaan eroteltuna. Jos meillä on esiteltynä kaksi CSS-sääntöä seuraavasti:

.tarkea {
  color: red;
  font-weight: bold;
}

.termi {
  font-style: italic;
}

Tällöin voisimme käyttää näitä tyylimäärittelyitä HTML-dokumentissa esimerkiksi seuraavasti:

<p>
   Tämä kappale sisältää lukijalle uusia termejä 
   kuten esimerkiksi 
   <span class="termi">luokkavalitsin</span>.
   Uudet termit esitetään kursiivilla. Jos termi on paitsi 
   uusi myös erityisen tärkeä kuten esimerkiksi 
   <span class="termi tarkea">periytyminen<span> se 
   esitetään lisäksi punaisella värillä ja vahvennettuna.
</p>

Luokiteltu elementtivalitsin on edellä kuvattujen valitsimien (elementti- ja luokkavalitsin) yhdistelmä. Valitsin muodostuu elementin nimestä, pisteestä ja luokan nimestä. Sääntö kohdistuu nyt määrättyihin elementteihin, jotka kuuluvat annettuun luokkaan. Esimerkiksi sääntö

h1.tarkea {
  color: maroon;
  font-weight: bold;
}

kohdistuu ainoastaan h1-elementteihin, joilla on class-attribuutin arvossa tarkea. Jos tämä ja luokkavalitsimen kohdalla esitetty esimerkkisääntö ovat yhtäaikaa olemassa, näytetään tärkeät h1-otsikot punaruskealla (maroon) ja kaikki muut tärkeät elementit punaisella.

[W3C] [MDN] [W3School]

4.3.3 id-valitsin

HTML-elementit voidaan myös nimetä yksilöllisesti ja kohdistaa sääntöjä yksittäisiin elementteihin. Tämä on mahdollista antamalla halutulle halutulle elementille yksikäsitteinen id-attribuutti ja käyttämällä CSS-säännöissä id-valitsimia. id-valitsin muodostuu #-merkistä ja id attribuutin arvosta.

#paaotsikko {
  color: green;
  text-align: center;
}
<h1 id="paaotsikko">KOKO JUTUN OTSIKKO</h1>

[W3C] [MDN] [W3School]

4.3.4 Kontekstinen valitsin

Kontekstinen valitsin (kutsutaan myös jälkeläisvalitsimeksi, descendant selector) muodostuu välilyönnillä erotetuista elementin nimistä. Nimiä voi olla kaksi tai useampia. Kontekstinen valitsin e1 e2 kohdistuu e1-elementtien sisällä oleviin e2-elementteihin. Jos elementtien nimiä on useampia kuin kaksi, kohteena on aina luettelon viimeinen elementti, jonka tulee olla kaikkien edellisten sisällä luettelon ilmaisemassa järjestyksessä. Esimerkiksi sääntöjen

ul li {
  font-size: small;
}

ul ul li {
  font-size: x-small;
}

vaikutuksesta numeroimattoman listan alkiot esitetään pienellä tekstillä (small) ja sisäkkäisen listan alkiot vielä pienemmällä tekstillä (x-small).

Huomaa, mikä ero on pilkuin erotetulla luettelolla ja välilyönnein erotetulla luettelolla (valitsinlista ja kontekstinen valitsin). Esim. sääntö

td, em {
  font-family: sans-serif;
  font-weight: bold;
}

vaikuttaa kaikkiin td ja em elementteihin, kun taas sääntö

td em {
  font-family: serif;
  font-weight: bold;
}

vaikuttaa ainoastaan td-elementtien sisällä esiintyviin em-elementteihin.

Kontekstisessa valitsimessa voidaan elementin nimien sijasta käyttää myös class tai id attribuutteja ja kaikkien näiden yhdistelmiä, esimerkiksi seuraavasti:

aside p.ingressi {
  font-family: sans-serif;
  color: blue;
}

[W3C] [MDN] [W3School]

4.3.5 Lapsivalitsin

Lapsivalitsin kohdistuu tietyn elementin lapseen. Seuraava sääntö kohdistuisi listan riveillä oleviin <strong>-elementteihin.,kuitenkin vain niihin <strong>-lapsielementteihin, ei hierarkiassa syvemmälle, esimerkiksi lapsenlapsiin.

li > strong {color:#f00;}

Lapsivalitsimen hahmohaku sopii kuitenkin vain välittömiin lapsielementteihin, ei hierarkiassa syvemmälle, esimerkiksi lapsenlapsiin.

<li> 
   <strong>tähän tekstiin yllä oleva hahmohaku sopii</strong>
   <p>
      <strong>mutta ei tähän</strong>
   </p>
</li>

[W3C] [MDN] [W3School]

4.3.6 Nuorempi sisarus -valitsin

Nuorempi sisarus -valitsin kohdistuu tiettyä elementtiä e1 seuraavaan elementtiin e2. Elementeillä tulee olla sama äiti.

h1+p {margin-top: 14px;}

Jolloin ykköstason otsikkoa välittömästi seuraavaan kappaleeseen lisätään yläreunaan marginaalia 14 pikseliä.

[W3C] [MDN] [W3School]

4.3.7 Attribuuttivalitsin

Attribuuttivalitsinta sovitetaan hahmoon elementin attribuutin tai/ja attribuutin arvon perusteella. Seuraava sääntö kohdistuisi <p>-elementteihin, joilla on dir-attribuutti, riippumatta siitä mikä attribuutin arvo on.

p[dir] {color:#f00;}

Seuraava sääntö kohdistuisi vain niihin kappaleisiin, jossa tekstin kirjoitussuunnaksi on määritelty oikealta vasemalle.

p[dir=rtl] {color:#f00;}

Seuraava sääntö taas kohdistuisi kaikkiin niihin kappaleisiin, yksi attribuutin class arvoista on "tarkea".

p[class~=tarkea] {color:#f00;}

Ja viimeinen esimerkki attribuuttivalitsimista kohdistuu kaikkiin kappaleisiin joiden attribuutin lang arvo alkaa kirjaimilla en (kuten en, en-us, en-gb, jne).

p[lang|=en] {color:#f00;}

[W3C] [MDN] [W3School]

4.3.8 Pseudoluokkavalitsin

Pseudoluokkavalitsin liitetään elementin nimen perään kaksoispisteellä erotettuna. Valitsinta ei soviteta elementteihin niiden tyypin, esiteltyjen attribuuttien eikä attribuuttien sisältöjen vaan jonkun muun elementin ominaisuuden perusteella. Yleisimmin käytettyjä pseudoluokkia ovat a elementteihin liittyvät neljä pseudoluokkaa ja niiden avulla muodostettavat pseudovalitsimet. Säännöt

td, em {
   a:link    { color: purple; }
   a:visited { color: blue; }
   a:hover   { border: 1pt dashed gray; }
   a:active  { color: lime; }
}

määrittelevät, että linkki on alunperin purppuranvärinen, ja se muuttuu siniseksi sen jälkeen kun siinä on käyty. Lisäksi, kursorin vieminen linkin päälle tuo linkin ympärille näkyviin katkoviivalla piirretyn reunuksen ja kun linkki aktivoidaan, se on uuden sivun latautumisen ajan väriltään limen vihreä.

[W3C, W3C] [MDN, MDN, MDN, MDN] [W3School, W3School, W3School, W3School]

Muut pseudoluokat, joita voidaan käyttää valitsimen muodostamisessa, ovat

:focus
valitsee aktiivisen elementin, esim.
 input:focus {background-color:yellow}

[W3C] [MDN] [W3School]

:first-child
valitsee elementit, jotka ovat äitinsä ensimmäisiä lapsia, esim.
 p:first-child {background-color:yellow;}

valitsee kaikki kappaleet, jotka ovat oman äitinsä ensimmäisiä elementtejä.

[W3C] [MDN] [W3School]

:lang(kielikoodi)
valitsee jokaisen elementin jolle on määritelty annettu kielikoodi.
 p:lang(it) {background:yellow;}

[W3C] [MDN] [W3School]

4.3.9 Pseudoelementtivalitsin

Pseudoelementtivalitsin liitetään elementin nimen perään kahdella kaksoispisteellä erotettuna. Pseudoluokkavalitsimilla haetaan olemassa olevia elementtejä, kun taas pseudoelementtivalitsemen avulla voidaan (nimensä mukaisesti) "luoda" pseudoelementtejä, jotka eivät oikeasti ole olemassa.

Seuraavassa lueteltun CSS2.1:ssä esitellyt neljä pseudoelementtiä. Esimerkiksi e::before -valitsimen ja content-piirteen avulla luodaan "maaginen" elementti elementin e eteen (pseudoelementtiä ei ole dokumenttipuussa).

::before
lisää annetun sisällön valitun elementin eteen, esim.
 p::before {content:"Lue tämä:"}

[W3C] [MDN] [W3School]

::after
lisää annetun sisällön valitun elementin jälkeen, esim.
 p::after {content:"Muista tämä:"}

[W3C] [MDN] [W3School]

::first-letter
valitsee elementin ensimmäisen kirjaimen, esim.
 p::first-letter {font-size:200%; color:#8A2BE2;}

[W3C] [MDN] [W3School]

::first-line
valitsee elementin ensimmäisen rivin, esim.
 p::first-line {background-color:yellow;}

[W3C] [MDN] [W3School]

Kaksi viimeistä eivät luo varsinaisesti uutta sisältöä, mutta nekin luovat kuitenkin "uuden elementin". Dokumentissa ei ole olemassa elementtiä ensimmäiselle kirjaimelle tai riville.

4.3.10 Universaalivalitsin

Univeraalivalitsin *, sopii kaikkiin elementteihin. Universaalivalitsinta näkee aika harvoin käytettävän, mutta itse asiassa se on käytössä koko ajan, mutta se jätetään kirjoittamatta näkyviin. Jos universaali valitsin on ainoa elementtivalitsin yksittäisessä valitsimessa, sen saa jättää pois

Esimerkiksi seuraavat kaksi valitsinta ovat itse asiassa samat

 .omaluokka
 *.omaluokka

samaten kuin seuraavat kaksi

 #osa-1
 *#osa-1

[W3C] [MDN] [W3School]

4.3.11 CSS3 valitsimet

Edellä lueteltujen valitsimien tehokkaan käytön opettelu on jo enemmän kuin perussivustojen toteuttamiseksi on välttämätöntä. Kolmostason valitsimet on jo standardoitu, joten on hyvä tietää, että CSS3:ssa määritellyt uudet valitsimet ovat:

[W3C] [MDN] [W3School]

Takaisin ylös

4.4 CSS-sääntöjen kohdistaminen elementtiin

Yhteen elementtiin kohdistuu yleensä useita tyylisääntöjä. Niitä saattaa yhdessä tyylitiedostossa olla useita. Sääntöjä saatetaan saada useasta lähteestä ja lisäksi niitä saatetaan luoda elementille automaattisesti periytymisen kautta. Siihen, mikä sääntö missäkin tilanteessa jää voimaan, ts. mitä sääntöja käytetään elementin tuottamiseen sivulle, vaikuttaa kolme pääperiaatetta:

  1. Sijanti (location)
  2. Periytyminen (inheritance),
  3. Painoarvo (specificity) ja

4.4.1 Sijainti (location)

Esimmäisellä tasolla elementin piirteiden arvoihin, eli siis elementtien ulkonäkoon vaikuttavat säännöt, jotka joka on voitu kohdistaa elementtiin:

Mikäli elementiin ei ole kohdistettu muita sääntöjä, ne esitetään selaimen oletustyylillä.

Selaimessa käyttäjä voi itse määrätä sivun tuottamisessa sovellettavia elementtien tuottamiseen liityviä sääntöjä, jotka kumoavat selaimen oletusasetukset. Heikkonäköinen käyttäjä voi haluta esimerkiksi oletustekstin suuremmaksi tai poikkeuksellisesti värejä näkevä saattaa haluta muuttaa tekstin muuttaa tekstin ja taustan oletusvärejä. Esimerkiksi Firefoxissa käyttäjä voi antaa määritykset selaimen asetuksissa, tai muokata sekä selaimen käyttöliittymäkomponentteja tiedoston userChrome.css, että tässä yhteydessä merkityksellisempiä elementtien esitysmuotoja tiedoston userContent.css, kautta.

Edelleen, dokumentissa itsessään määritellyt säännöt kumoavat selaimessa annetut säännöt ja ovat sitä voimakkaampia mitä lähempänä elementtiä ne ovat. Ulommalla tasolla olevat säännöt siis ikäänkuin "valuvat" (cascade) sisemmäs, mikäli mikään uusi sääntö ei niitä kumoa.

Jos elementin piirteelle ei ole annettu eksplisiittisesti arvoa, sen arvo voi periytyä implisiittisesti äidiltä. Jos esimerkiksi määrität <body>-elementille tietyn kirjasimen ja koon, on mielyttävää, ettei sitä joudu määrittämään jokaiselle sivun elementille (esim. kappaleelle) uudelleen, vaan määrityksen joutuu tekemään vain niille, jotka poikkeavat tuosta sivulla yleisesti käytetystä fontista.

4.4.2 Periytyminen (inheritance)

Yksi CSS-piirteiden ominaisuksista on periytyvyys, se määrittää sen, perityykö piirteen arvo äidiltä lapselle vai ei. W3C:n CSS-määrittelystä piirteiden yhteenvetotaulukossa kustakin CSS:n piirteestä on annettu seuraavat tiedot:

Ominaisuus Selitys
Name Piirteen (elementin visuaalisen ominaisuuden nimi)
Value Arvot, joita piirre voi saada arvokseen.
Initial value Oletusarvo, ts. arvo, joka piirteellä on ennenkuin sitä CSS-säännöillä muutetaan.
Applies to Mitä elementtiä piirre, koskee? Kaikki piirteet eivät ole käytössä kaikissa elementeissä.
Inherited? Jotkut arvoista saadaan perittynä, toisia ei.
Percentages  Jos piirre voi saada arvokseen prosentteja, miten se tulkitaan (esimerkiksi mihin prosentti arvo viittaa, prosentteja mistä).
Media Millä mediatyypeillä piirre on relevantti.

Piirteen ominaisuuksista voi aina tarkastaa onko se periytyvä vai ei. Kirjasimen voi määrittää runkoelementille, eikä sitä joudu toistamaan sivun muille elementeille, koska piirre font-family on periytyvä piirre.

Tarkastellaan vielä seuraavaa esimerkkiä. Jos meillä on esimerkiksi määritelty, että listan alkioissa käytetään tekstin värinä sinistä:

li {
   color: blue; 
}

ja meillä on html-koodissa lista, jonka toinen alkio koostuukin kahdesta kappaleesta:

<ul>
  <li> 
    Tässä ensimmäinen listan alkio
  </li>
  <li> 
    <p>
       Listan toinen alkio onkin pidempi, jaettu kahteen kappaleeseen.
       Tässä ensimmäinen kappale.
    </p>
    <p>
       Tässä toinen kappale
    </p>
  </li>
</ul>

Piirteiden ominaisuustaulukosta näemme, että color on periytyvä piirre. Tästä syystä listan toinenkin alkio kirjoittuu sinisellä värillä. Entä, jos määritämme lisäksi, että listan vasempaan reunaan piirretään 3em levyinen punainen reunus?

li {
   color: blue; 
   border-left: 3em solid red; 
}

Periytyykö reunus <p> elementille? Kumman seuraavista tuotoksista saamme näillä määrityksillä?

periytyy vai ei periydy

Jälkimmäinen kuvista on oikein, koska border-left piirre ei ole periytyvä piirre.

Piirteen voi kuitenkin pakottaa periytymään. Ts. sen sijaan, että annettaisiin piirteelle jokin määrätty arvo, annetaankin piirteelle arvo inherit, jolloin piirre saa arvonsa vanhempielementiltä. Edellisessä esimerkissä saisimme ensimmäisen yo. kuvista, jos antaisimme kappaleelle tyylisäännön:

p { 
   border-left: inherit; 
}

Huomaa myös, että piirteillä on aina tietyt alkuarvot (taulukossa arvo initial value). Jos esimerkiksi antaisimme listalle taustavärin background-color piirteen avulla, periyisikö se listan toiseen alkioon (<p> elementille)? Taustaväri ei ole periytyvä piirre, joten ilmeisesti ei. Mutta jos kokeilet, huomaat, ettei listan toinen alkio kuitenkaan tule eri värillä kuin muu lista. Miksi? Selitys on juuri piirteen alkuarvoasetuksessa. Taustaväri on oletusarvoisesti läpinäkyvä (taulukossa arvo transparent)

4.4.3 Painoarvo (specificity)

Sääntö kohdistetaan aina tiettyyn elementtiin, mitä spesifisempi sääntö, sitä suurempi painoarvo säännöllä on. Jos samaan elementtiin kohdistuu useampia sääntöjä, elementtiin sovelletaan sääntöä, joka on painoarvoltaan suurempi. Toisin sanoen spesifisemmin kohdistettu sääntö ylittää karkeammin kohdistetun säännön.

Säännön painoarvo saadaan laskettua arvo seuraavasti. Jokaisella valitsemella on oma painoarvonsa seuraavasti.

Valitsin Painoarvo
universaalivalitsin 0
elementtivalitsin, pseudoelementtivalitsin 1
luokkavalitsin, pseudoluokkavalitsin, attribuutivalitsin 10
id-valitsin 100
elementtin style-attribuutin avulla annettu sääntö 1000

Laskemalla nämä arvot yhteen saadaan säännön painoarvo (specificity value). Seuraavassa muutamia esimerkkejä.

id-valitsemella annetut säännöt ovat siis ylivoimaisesti painavavimpia, jos jätetään elementin attribuuttiin kirjoitettu sääntö huomiotta.

4.4.4 !important

Vielä yksi erityistilanne: kaikki nämä säännöt on mahdollista kumota antamalla säännölle määritys !important.

Tietyn säännön määritellä poissulkevan tärkeiksi seuraavasti:

p { 
  font-size:large; !important 
}

Käyttäjä voisi omassa tyylitiedostossaan antaa !important määrityksen avulla tälläisen säännön, joka kumoaisi kaikki muut p-elementille annetut koon määritykset.

!important määritys onkin tarkoitettu edelläkuvatuntyyppisiin erikoistilanteisiin, sen käytöstä tulisi siis ehdottomasti pidättäytyä, vaikka sen avulla saisikin helposti joitain tilanteita hoidetuksi.

4.4.5 Sääntöjen määrittelystä

Todettakoon vielä, että saman painoarvon sääntöjen kesken voimaan jäävä sääntö määräytyy säännön sijainnin mukaan.

Ohjenuorana sääntöjen kirjoittamiselle on pyrkiä tekemään säännöistä mahdollisimman yleisiä ja mennä spesifisiin sääntöihin vain kun tilanne todella niin vaatii. Mitä alhaisempi kynnys hyvin spesifisien sääntöjen käyttämiseen on, sitä helpommin tyylipohjasta tulee sekava ja vaikeasti ylläpidettävä. Alla kolme hyvää kirjoitelmaa aiheesta.

Takaisin ylös

4.5 CSS-värit

Värin voi määritellä usealla tavalla. Helpoin tapa on käyttää CSS:ssä määriteltyjä värien nimiä, 16 perusvärin lista (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow) olivat aiemmin määriteltynä jo HTMLssä. CSS3:ssa on määritelty lisäksi 147 muuta nimettyä väriä.

Nämä 163 väriä ovat kuitenkin pieni osa täysvärikuvassa käytettävissä olevista 16,7 miljoonasta värisävystä. Tarkemman värinmäärityksen voi tehdä käyttäen RGB/RGBA tai HSL/HSLA formaatteja (A-versioissa on mukana koko kuvan läpinäkyvyys).

Verkosta löytyy hyviä työkaluja värien määritykseen, esimerkiksi:
ColorZilla Firefoxiin, Colorzilla Chromeen tai w3schoolin värinpoimija

4.5.1 RGB / RGBA (Red, Green, and Blue)

RGB-väri määritellään kolmena lukuna: punaisen, vihreän ja sinisen värin määränä.

KKolmen värin intensitetti voidaan siis määrittää joko desimaalilukuina (0-255), prosentteina (0%-100% ) tai heksadesimaalilukuina (00-FF). CCS-väreissä kaksi ensimmäistä koodausta annetaan suluissa kolmena pilkuilla toisistaan erotettuna lukuna, ja sulkujen eteen kirjoitetaan tunnus rgb. Heksadesimaaliesitys alkaa #-merkillä, jota seuraa kuusi merkkiä joukosta: 0, 1.. 9,a,..f.

Esimerkiksi mustassa värissä kaikkien kolmen värin määrä on 0, ts. musta väri voitaisiin esittää RGB-värinä rgb(0,0,0), rgb(0%,0%,0%) tai #000000. Vastaavasti valkoinen olisi rgb(255,255,255), rgb(100%,100%,100%) tai #ffffff.

Määritys rgb(54,165,63) tuottaa ruohonvihreän värin, joka prosentteina ilmaistuna olisi rgb(21%, 65%, 5%). Heksadesimaaliesitysmuodossa sama väri olisi #36c93f.

Määritys rgb(153,0,51) puolestaan tuottaa tiilenpunaisen värin . Prosentteina ilmaistuna se olisi rgb(60%, 0%, 13%) ja heksadesimaaliesitysmuodossa sama väri olisi #990033. Näissä erikoistilanteissa, joissa kunkin värin heksadesimaaliesitys koostuu kahdesta samasta merkistä, heksadesimaaliesityksen voi lyhentää esitettäväksi kolmella merkillä: #903.

RGBA-värissä määritellään kolmen luvun lisäksi neljäs, joka määrittää värin läpinäkyvyyden desimaalilukuna väliltä 0-1. Mitä lähempänä nollaa luku on, sen läpinäkyvämpi kuva on. Jos edellisessä tiilenpunaisessa värissä olisimme käyttäneet tekstivärinä mustaa, teksti olisi ollut vaikeasti nähtävissä. Seuraavassa värille on annettu läpinäkyvyyttä 0.8, 0.6, 0.4 ja 0.2: rgba(153,0,51,0.8) / rgba(153,0,51,0.6) / rgba(153,0,51,0.4) / rgba(153,0,51,0.2)

4.5.2 HSL / HSLA (Hue, Saturation, and Lightness)

HSL-väri on toinen tapa määritellä värisävy (uusi, CSS3). Tässäkin määrittely tapahtuu kolmella luvulla: värisävy ja värikylläisyyden ja vaaleuden aste. Ensimmäinen näistä luvuista ilmaistaan luvulla väliltä 0-360 ja kaksi jälkimmäistä prosentteina.

Musta värin HSL-määritys hsl(0, 0%,0%) ja valkoisen hsl(0, 0%, 100%).

HSL väreinä edellisen esimerkin värit ovat: ruohonvihreä: hsl(124, 58%, 50%) ja tiilenpunainen: hsl(340, 100% 30%) .

HLSA-värissä määritellään neljäs prosenttiluku läpinäkyvyydelle täysin analogisesti RGBA-määrityksen kanssa.

Takaisin ylös

4.6 Mittayksiköt

CCS:ssä käytetyt mittayksiköt ovat joko suhteellisia tai absoluuttisia. Näiden lisäksi voidaan monessa yhteydessä käyttää prosenttilukuja suhteellisina mittayksiköinä.

4.6.1 Suhteelliset mittayksiköt

Yksiköt em ja ex ovat suhteessa elementissä käytettyyn kirjasimeen. Mittayksikön edessä annettava mittaluku voi olla joko kokonaisluku tai desimaaliluku (desimaalierottimena piste). Mittaluvun ja mittayksikön väliin ei saa kirjoittaa välilyöntiä.

Huomaa erityisesti, että CSS pikseli, px, on suhteellinen, ei absoluuttinen mittayksikkö. Se ei välttämättä ole sama kuin laitteen pikseli, vaan se on määritelty pienimmäksi mittayksiköksi, joka on paljain silmin nähtävissa ja joka ko. tulostuslaitteessa voidaan tuottaa tarkkareunaisena.

Voi siis luottaa, että yhden pikselin (ja sen kerrannaisten) viiva tulostuu tarkkana laitteesta riippumatta. On kuitenkin hyvä ymmärtää että px mittasuhde ei tarkoita samaa kuin kirjasinten kirjasinkoko. CSS pikselin ja laitteen näyttöpikselin suhde riippuu näytön koosta ja tarkkuudesta. CSS takaa myös, että bittikarttakuvien (jpg, png, gif) pikselit hahmonnetaan suoraan yksi-yhteen CSS-pikseleihin, jolloin esimerkiksi 320 x 215 kuvapisteen kuva näkyy sivulla täsmälleen 320 px leveänä ja 215px korkeana.

li { 
  font-size: 0.875em;
  padding: 2px;
}

4.6.2 Prosentteina

Prosenttiluvut ilmaistaan kirjoittamalla prosenttimerkki luvun (kokonais- tai desimaaliluku) perään. Prosenttiarvot annetaan aina suhteessa johonkin toiseen arvoon, suhteessa vanhempielementin ko. piirteen arvoon.

Esimerkki: <body> elementin lapsi voisi olla määriteltynä kuuluvaksi vasenpalsta-luokkaan (ts. elementillä on attribuutti class="vasenpalsta"). Toinen lapsi oikeapalsta-luokkaan. Tyylipohjassa on annettu säännöt:

.vasenpalsta { 
  width: 40%;
}
.oikeapalsta { 
  margin-right: 5%;
}

Tällöin vasenpalsta-luokaan määritelty elementti 40% koko sivun leveydestä, ja oikeapalsta-luokkaan määritellyllä elementillä on oikeassa reunassa marginaali, joka 5% sivun leveydestä.

4.6.3 Absoluuttiset pituusyksiköt

CSS:ssä on määritellyt absoluuttiset mitat, ovat seuraavat.

Mittayksiköiden väliset suhteet ovat siis: 1in = 2.54cm = 25.4mm = 72pt = 6 pc

Absoluuttiset mittayksiköt ovat nimensä mukaisesti pysyvästi samanmittaisia riipumatta välineestä, missä ne esitetään. Näin pitäisi olla, mutta käytännössä jää tietysti aina laitevalmistajan vastuulle, kuinka tarkasti se toteuttaa mittoihin liittyvät standardit. Absoluuttisia mittaksiköitä ei juurikaan voi käyttää tuotettaessa sisältöä näytöille, koska absoluuttisella mitalla määritetty elementti (esim. 10 cm) olisi puhelimelle kovin vaativa tilan varaus, vaikka se pöytäkoneen näytölle ei tuottaisikaan ongelmia.

4.6.4 Mitä mittayksiköitä pitäisi käyttää?

Sivustojen ulkoasua määritettäessä tulisi CSS-säännöissä lähes poikkeuksetta käyttää suhteellisia mittoja (em, ex, px tai prosentteina), jolloin sivu skaalautuu kulloinkin käytettävään sivunkokoon. Kirjasinten koot suositellaan annettavaksi em-yksiköissä. Absoluuttisten pituusyksikköjen käyttöön tulisi olla jokin erityinen syy.

Lyhyt ja ytimekäs selvitys aiheesta löytyy W3C:n sivuilta:
Bert Bos: em, px, pt, cm, in ...

Takaisin ylös

4.7 Tekstin muotoilu

Tekstin muotoilemiseksi elementin sisällä on käytettävissä seuraavat piirteet:

text-decoration: none|underline|overline|line-through|blink|inherit
[W3C] [MDN] [W3School]
Tekstia voidaan alleviivata, yliviivata, ylleviivata ja vilkuttaa (underline, line-through, overline, blink). Lisäksi piirteen arvon voi asettaa myös pakkoperinnällä tai pyyhkiä pois kaikki "koristelut". (inherit, none). Ei periydy.
text-align: left|right|center|justify|inherit
[W3C] [MDN] [W3School]
Teksti sijoittelu elementissä voi olla vasen suora, oikea suora, keskitetty tai molemmista reunoista tasattu. Oletuksena oleva arvo toimii länsimaiselle tekstille kuten arvo left ja right, jos tekstin kirjoitussuunta on oikealta vasemmalle. Periytyy.
text-indent: pituusyksikkö|prosentti|inherit
[W3C] [MDN] [W3School]
Tekstilohkon ensimmäisen rivin sisennys, arvo annetaan jollakin mittayksiköllä tai prosentteina äiti-elementin leveydestä. Alkuarvona on 0. Periytyy.
text-overflow: clip|ellipsis|merkkijono
[W3C] [MDN] [W3School]
Määrittelee miten tekstiä käsitellään ellei se mahdu elementtiin. Teksti joko vain leikataan (clip), leikataan ja merkitään loppuun kolme pistettä (ellipsis), joka kertoo ettei teksti mahtunut elementtiin tai piirteelle voi antaa merkkijonon, joka annetaan tässä tilanteessa elementin arvoksi. Ei periydy.
text-shadow: none|x-offset y-offset [blur] [väri]
[W3C] [MDN] [W3School]
Piirtää tekstille varjon, varjolle pitää määritellä horisontaalinen ja vertikaalinen siirtymä. Nämä arvot annetaan mittayksikköinä. Varjon voi myös hämärtää (blur)tai määrätä varjolle haluamansa värin. Periytyy.
text-transform: capitalize|uppercase|lowercase|none|inherit
[W3C] [MDN] [W3School]
Tekstin kirjasimet voi pakottaa isoin tai pienin kirjaimin kirjoitetuksi tai joka sanan isolla alkavaksi. Periytyy.
line-height: normal|mittayksikkö|kokonaisluku|prosentti|inherit
[W3C] [MDN] [W3School]
Rivin korkeuden voi säätää antamalla sille koko mittayksiköiden avulla tai kokonaisluku (1 rivinkorkeuden riviväli, 2 rivinkorkeuden riviväli, jne. tai rivinkorkeuden voi pakottaa alkuperäiseksi (normal). Periytyy.
letter-spacing: normal|mittayksikkö|inherit
[W3C] [MDN] [W3School]
Kirjainten välistys voidaan määrittää pituusmittana. Periytyy.
word-spacing: normal|mittayksikkö|inherit
[W3C] [MDN] [W3School]
Sanojen välistys voidaan määrittää pituusmittana. Periytyy.
white-space: normal|pre|nowrap|pre-wrap|pre-line|inherit
[W3C] [MDN] [W3School]
Määrittää tyhjätilamerkkien käsittelemisen.
Tyhjätilamerkit luhistuvat yhdeksi arvoilla nowrap ja pre-line ja säilytetään arvoilla pre ja pre-wrap.
Rivinvaihdot käsitellään seuraavasti:
nowrap: riviä ei vaihdeta lainkaan (se jatkuu kunnes kohdataan rivinvaihtoelementti <br>),
pre: rivi toistaa vain tekstissä annetut rivinvaihdot (kuten <pre>-elementissä),
pre-line ja pre-wrap: rivi toistaa annetut rivinvaihdot mutta vaihtaa tarvittaessa riviä myös automaattisesti.
Periytyy.
word-wrap: normal|break-word
[W3C] [MDN] [W3School]
Määrittelee voidaanko pitkä sana katkaista seuraavalle riville, jos se ei mahdu kapeaan elementtiin. Periytyy.

Takaisin ylös

4.8 Kirjasimet

CSS-piirteet tekstissä käytetyn kirjasimen säätelyyn sallivat kirjasimen ja kirjasinperheen, (font-name, font-family), kirjasinkoon (size) ja kirjasimen erilaisten leikkausten (style, weight, variant) määrittelyn.

4.8.1 Kirjasinperheet

font-family: [kirjasinperhe]*|[geneerinen kirjasin-perhe]
[W3C] [MDN] [W3School]
Piirre käytettävän kirjasinperheen määritämiseen. Termi kirjasinperhe viittaa siihen, että jokainen kirjasin sisältää useampia leikkauksia kirjasimesta (normaali, kursivoitu, lihavoitu, ...).

Piirteen arvoksi voi antaa useita vaihtoehtoja pilkuilla erotettuna listana, jolloin käyttöön tulee ensimmäinen niistä joka sivun tulkintaympäristössä on käytettävissä. Viimeisenä vaihtoehtona suositellaan käytettävän jotakin ns. geneeristä kirjasinperhettä. Esimerkiksi:

.body { 
  font-family: verdana, arial, sans-serif;
}

.lainaus { 
  font-family: "new century schoolbook", serif; 
}

Geneeriset kirjasinperheet

sans-serif
esim. Arial, Geneva, Helvetica, Lucida Sans, Trebuchet, Verdana. Kirjasin on Päätteetön kirjasin, nykyisin näitä kirjasimia käytetään paljon verkkosivuilla, ja yleensäkin elektronisessa muodossa esitetyissä teksteissä.
serif
esim. Garamond, Georgia, New York, Times, Times New Roman. Päätteellinen kirjasin, käytetään yleisesti paperille tulostetussa tekstissä.
monospace
tasavälinen kirjasin, esim. Courier, Courier New, Lucida Console, Monaco. Käytetään tyypillisesti koodin kirjoittamiseen tai konekirjoitukseomaisen tekstin vaikutelman aikaansaamiseksi. Kirjasimen kaikki kirjaimien vievät riviltä saman tilan ts. ovat samanlevyisiä.
cursive fantasy
esim. Impact, Copperplate, Desdemona, Kino. Näitä kirjasimia käytetään erikoistilanteissa, otsikoissa tai lyhyissä huuhahduksenomaisissa tekstpaloissa; pitkissä teksteissä käytettynä tekee tekstistä vaikealukuista. Näissä kirjasimissa ei kirjasinperhe eikä merkistökokoelma välttämättä ole kattavasti toetutettu, esim. kursiivi kirjasin tai kansallisia erikoismerkkejä saataa puuttua.

Eri kirjasinten luettavuudesta on tehty vuosikymmenten kuluessa paljon tutkimusta, joka nykytiedon valossa on todettu enemmän tai vähemmän hataraksi. Erityisesti sarif ja san serif vertailusta löytyy paljon tutkimusta. Vaikuttaa siltä että luettavuuteen vaikuttaa enemmänkin tottumus (ja kirjasimen selkeys, toki) kuin itse käytetty kirjasinleikkaus.

Hyvä yhteenveto aiheesta:
Alex Poole: Which Are More Legible: Serif or Sans Serif Typefaces?).

Verkkosivuilla voi halutessaan käyttää myös ns. webbifontteja (webbikirjasimia, Web fonts), jolloin kirjasinleikkaukset haetaan jostain palvelusta serverille tallennetusta tiedostoista. Tälläiset erikoiskirjasinperheet saattavat olla maksullisia ja ne liitetään sivulle @font-face CSS-piirteen avulla:
@font-face: {kirjasimen-tiedot}

Joistain palveluista (esim. Google Fonts tai Fontspring) kirjasimet voi linkata dynaamisesti suoraan omaan dokumenttiinsa, jolloin niitä tarvitse erikseen tallentaa sivuston yhteyteen.

[W3C] [MDN] [W3School]

4.8.2 Kirjasinkoot

font-size: xx-small|x-small|small|medium|large|x-large|xx-large|mittayksikkö
[W3C] [MDN] [W3School]

Tekstin kokoa voi hallita kahdella tavalla; voimme määrätä elementin absoluuttisen kirjasinkoon käyttäen CSS:n nimettyjä arvoja tai absoluuttisia mittayksiköitä, tai määrittää tekstin koon suhteellisin mittayksiköin (prosentteina tai em/ex-mittayksiköillä).

Elementtien kirjasinkoko on mahdollista määrätä suoraan, jos niin halutaan. Pistekokojen sijasta on kuitenkin suositeltavampa käyttää font-size-piirteen suhteellisia kokomäärityksiä (xx-small ... xx-large), joka onskaalautuvampi. Suhteellisten kokojen (joko em, ex tai prosentit) avulla saa parhaiten yhdistettyä mahdollisuuden kontrolloida kirjasinkokoja eri elementeissä menettämättä skaalautuvuutta.

Kirjasinkokojen hallinta

Seuraavassa on esitetty helposti sovellettavissa oleva nyrkkisääntö kirjasinkokojen määritykseen.

Anna ensin dokumentin rungossa (<body>-elementille) tekstin peruskooksi 100%:

body { font-size=100% }

Sata prosenttinen kirjasinkoko tarkoittaa selaimissa yleisesti 16px kirjasinta. Muut elementit (<body>-elementin lapset) on sen jälkeen yksinkertaista skaalata suhteessa tähän kirjasinkokoon. Jos esimerkiksi haluat, että kappaleiden esityskoko (normaalissa näyttötilassa) on 14px (tyypillinen käytetty koko näytöllä), annat kappaleen kooksi 14/16 px (= 0.875em tai 87.5%). Määrität silloin kappaleen kirjasinkooksi

p { font-size = 0.875em }

Määritä sitten muiden dokumentin elementtien kirjasinkoot vastaavasti. Otsikoill (h1 ja h2) voisi antaa 22px ja 18px kirjasinko jolloin niiden suhteelliset koot olisivat 1.375em ja 1.1em. Tyypillinen esimerkkipohja kirjasinkokojen määritykseen olisi siten seuraavanlainen:

@charset "UTF-8";

body {
  font-family: "Palatino Linotype", Palatino, serif;
  font-size: 100%;
}

h1, h2 {
  font-family: "Arial Black", Arial, sans-serif;
  font-weight: normal;
}

h1 { /* 22px/16px */ 
  font-size: 1.375em; }

h2 { /* 18px/16px */
  font-size: 1.1em;  
}

p { /* 14px/16px */ 
  font-size: .875em; 
}

Tällöin pitää kuitenkin muistaa, että kirjasimen koko on periytyvä ominaisuus. Jos tätä ei muista, kirjasinkoon periytyminen saatta jossain tilanteessa johtaa yllättäviin tilanteisiin kun suhteellinen skaalaus kertautuu sisäkkäisissä elementeissä.

4.8.3 Kirjasinten muotoilu

font-style: normal|italic|oblique|inherit
[W3C] [MDN] [W3school]
Kirjasin voidaan näyttää kursiivina (italic), tai käyttää siitä vinokirjasinleikkausta (obligue), jos se on kirjasimelle olemassa.

font-variant: normal|small-caps|inherit
[W3C] [MDN] [W3school]
Kirjasimesta voidaan käyttää versaalia kirjasinta (small-caps) käyttävää leikkausta, jos se on sille olemassa.

font-weight:normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900|inherit
[W3C] [MDN] [W3school]
Vahvennuksen määräämiseen voi käyttää myös nimettyjä vahvuuksia tai käyttäen lukuarvoa väliltä 100 - 900 (400 normaalivahvuus, ja 700 tavanomainen lihavoitu). Se, kuinka suuri muutoksen pitää olla, jotta se käytännössä näkyisi muutoksena kirjasimen vahvuudesta, riippuu tulkkausympäristöstä ja kirjasinleikkauksesta.

Takaisin ylös

4.9 Lokeromalli

CSS:n lokeromalli

CSS käsittelee kaikkia verkkosivulla olevia elementtejä, ikäänkuin niiden ympärille olisi piirretty oheisen mallin mukaiset näkymättömät laatikot.

Lokeromalli antaa sivun suunnittelijalle hyvät välineet sivun sommitteluun. Seuraavassa nähdään, että CSS-sääntöjen avulla on mahdollista muokata kunkin elementin lokeromallin eri osia monipuolisesti, kuten esimerkiksi värejä (color, background-color), taustoja (background) reunan ominaisuuksia (border), tai alueiden kokoja (width, height).

4.9.1 Reunus, täyte, marginaali (border, padding, margin)

pyöristettykulmainen suorakaideElementin reunus muotoillaan CSS-piirteillä border-width, border-style ja border-color.

Kunkin näistä piirteistä avulla voidaan muokata lokeromallin reunusta joko kokonaisuudessaan, tai erikseen kehyksen yläreunaa, oikeaa reunaa, alareunaa tai vasenta reunaa. Jos arvoja annetaan yksi, muotoilu koskee kaikkia reunoja.

Jos arvoja annetaan neljä (välilyönnillä toisistaan erotettuna) arvot koskevat eri reunoja yllä luetellussa järjestyksessä (top, right, bottom, left).

border-width: [thin|medium|thick|mittayksikkö|inherit]1-4
[W3C] [MDN] [W3school]
border-style: [none|hidden|dotted|dashed|solid|double|width|groove|ridge|inset|outset]1-4
[W3C] [MDN] [W3school]
border-color: [transparent|värikoodi|inherit]]1-4
[W3C] [MDN] [W3school]

Reunuksen oletusväri on "kynän väri", ts. elementin piirteen color arvo.

pyöristettykulmainen suorakaide Näiden kolmen piirteen (width, style, color) lisäksi kehyksen kulmat voidaa pyöristää border-radius-piirteen avulla. Piirteelle annetaan arvona kulman pyöristävän ympyrän säde (oletusarvo on 0, ts. kulma ei ole pyöristetty). Pyöristyssäde koskee kaikkia kulmia. Jos kulmien pyöristyksien halutaan voivat olevan erilaisia, arvot luetellaan välilyönnillä toisistaan eroteltuna.

border-radius: [mittayksikkö]1-4
[W3C] [MDN] [W3school]

Reunuksen eri piirteet voi antaa yksittäin elementin eri reunoille, esim.

border-attribuutin käyttöesimerkki, neljä kehystä yksittäin annettuna
.kehys {
  border-style: solid;
  border-top-width: 1px;
  border-right-width: 10px;
  border-bottom-width: 1px;
  border-left-width: 50px;
}

piirtäisi elementin vasemman reunan hyvin vahvalla ja ylä- ja alareunan hyvin ohuella viivalla. Esimerkissä huolehdittiin ensin border-style attribuutin avulla, että kehys oli näkyvä. Jos reunojen paksuudet kirjoitetaan yhteen sääntöön, tulkitaan annetut mitat kohdistuvan elementin reunaviivaan myötäpäivään yläreunasta lähtien. Edellisen kanssa yhtäpitävä sääntö olisi siis

.kehys {
  border-width: 1px 10px 1px 50px;
}

Tässäkään merkintätavassa ei kuitenkaan tarvitse antaa arvoja kaikille reunoille, jos arvoja on vähemmän kuin neljä, periaate on, että reunus pyrkii pysymään symmetrisenä. Jos siis annamme vain yhden arvon, se määrää reunuksen elementin kaikille reunoille. Jos annamme kaksi arvoa, ensimmäistä arvoista käytetään sekä ylä-, että alareunan piirtämisessä ja toista arvoa oikean ja vasemman reunan piirtämisessä. Jos annamme kolme arvoa, toista arvoista käytetään sekä oikean että vasemman reunaviivan piirtämisessä.

Ks. Esimerkki reunuksen käytöstä.

Kun reunus on kaikilla reunoilla samanlainen, voidaan reunuksen piirteet asettaa myös kerralla käyttäen lyhennemerkintää: border-attrivuutin käyttöesimerkki

.kehys {
   border: 15px outset maroon;
}

Lyhennemerkinnästä voi joku tai jotkin kolmesta piirteestä puuttua (jolloin ko. piirteelle käytetään oletusarvoa), mutta järjestyksen tulee kuitenkin aina olla yllä annettu (leveys, tyyli, väri).

Täytteen leveys annetaan padding-piirteen avulla.

padding: [mittayksikkö]1-4
[W3C] [MDN] [W3school]

Se voidaan antaa erikseen elementin eri laidoille piirteillä padding-top, padding-right, padding-bottom ja padding-left vastaavasti kuin edellä reunuksen piirteiden kanssa, esimerkiksi

padding-attrivuutin käyttöesimerkki
.kehys {
   border: 1px solid black;
   padding: 5px 50px;
}

Marginaalin leveys määritellään täysin analogisesti, joko yksittäin piirteiden, margin-top, margin-right, margin-bottom ja margin-left avulla tai lyhyemmin, yhdellä piirteellä

margin: [mittayksikkö]1-4
[W3C] [MDN] [W3school]

margin-attribuutin käyttöesimerkki

Esimerkiksi

.kehys {
  border: 1px solid black;
  padding: 5px;
  margin: 0px 2px 5px;
}

4.9.2 Taulukon kehystys

Taulukolle ja sen soluille on määritelty reunaviivat esimerkiksi seuraavasti: esimerkkikuva jossa soluilla  
			tuplakehystys

table, th, td {
  border: 1px solid black;
}

Tällöin viivat piirtyvät tuplana (taulukolle, ja kullekin solulle erikseen, kuten oheisessa kuvassa). Kahden solun väliin piirtyy siis silloin aina kaksi viivaa. Piirteen border-collapse avulla voi määrätä, että taulukon solujen väliin piirretään vain yksi viiva (piirteen arvo voi olla collapse tai separate). esimerkkikuva jossa soluilla yksinkertainen 
			kehystys

table, td {
  border: 1px solid black;
}
table {
  border-collapse: collapse;
}

border-collapse: collapse|separate|inherit
[W3C] [MDN] [W3school]

Solujen väliin jätettävää tilaa voi säädellä padding piirteen avulla aivan kuten millä tahansa muullakin elementillä. Erityisesti tähän taulukoihin liittyvään tilanteeseen on kuitenkin käytettävissä myös piirre border-spacing, jonka avulla määritellään vierekkäisten solujen etäisyys toisistaan CSS-mittayksiköillä ilmaistuna. Jos piirteelle annetaan arvona vain yksi mittayksikkö, horisontaalinen ja vertikaalinen etäisyys ovat yhtä suuret. esimerkkikuva välistetyistä soluista

table, th, td {
  border: 1px solid black;
}
table{
  border-spacing:20px 5px;
}

border-spacing: h-etäisyys [v-etäisyys]|inherit
[W3C] [MDN] [W3school]

Takaisin ylös

4.10 Taustat

Olemme jo aiemmissa esimerkeissä nähneet, että color piirre asettaa elementin "edustavärin", ns. piirtovärin, jonka avulla voidaan asettaa elementissä annetun tekstin väri. Edellä on ollut esimerkkejä myös taustavärin määrttelemisestä.

Elementille voi antaa taustaksi myös taustakuvan background-image-piirteen avulla.

Oletusarvoisesti taustakuva toistuu sekä horisontaalisessa että vertikaalisessa suunnassa. Tämän avulla voi helposti toteuttaa erilaisia taustatekstuureja.

Ks. Esimerkki taustakuvan käytöstä
Ks. Esimerkki kuvan käytöstä tekstuurin luomiseksi

Taustakuvan esittämistä voi kontrolloida seuraavilla piirteillä

Ks. Esimerkki kuvan käytöstä taustalla (ei toistoa)

Taustan tyylit voidaan asettaa myös kerralla, käyttäen lyhennemerkintää

background: color position size repeat origin clip attachment image;

Takaisin ylös

4.11 Visuaalinen sommittelu

Sivun visuaalisen sommittelun periaate CSS-tyylipohjien avulla on yksinkertainen.

Tee ensin sivusta "rautalankamalli", ts. mieti millaisista visuaalisista elementeistä sivusi koostuu. Kirjoita sitten nuo elementit omiksi osikseen käyttäen ensisijaisesti HTML5:n sivun rakenteen määrittelyyn esiteltyjä elementtejä, ja toissijaisesti geneeristä div-elementtiä. Voit sen jälkeen sijoitella elementit rautalankamallisi mukaisesti käyttäen asemointia (position), kellutusta (float) tai elementtien näyttötavan muokkausta (display).

4.11.1 Rautalankamalli

Rautalankamallin ajatuksena on miettiä mitä sisältöä sivulla halutaan esittää, ja miten paljon sille halutaan varata tilaa. Rautalankamallin voi hyvin piirtää käsin paperille, mutta tähän tarkoitukseen löytyy myös erilaisia wireframe, tai protoiluvälineitä (esim. balsamiq, maksullinen, mutta siitä on olemassa myös ilmainen webbiversio tai Pencil; täältä löytyy enemmänkin vaihtoehtoisia välineitä 33 Free and Online Tools for Drawing, Painting and Sketching).

Tämän sivuston rautalankamalli Tämän sivuston rautalankamalli voisi olla jotain oheisen kuvan kaltaista. Rautalankamallissa ei ole tarkoitus kuvata värejä, kirjasinvalintoja, kuvia tai taustoja, vaan lähtökohtana on sivun rakenteen suunnittelu lähtökohtana kullakin sivulla esitettävä sisältö ja sen tärkeys sekä sivulla tarvittavat navigointielementit.

4.11.2 Asemointi

position: static|relative|abolute|fixed;
[W3C] [MDN] [W3school]

Normaali elementtivirta

position: static

Normaalisti elementit sijoittuvat sivulle elementtivirran mukaisessa järjestyksessä, toisin sanoen siinä järjestyksessä jossa ne on dokumenttiin kirjoitettu. CSS:n position-piirteelle annetut arvot antavat meille erilaisia mahdollisuuksia poiketa tuosta järjestyksestä. Elementtien oletusasemointi on static, eli tällöin elementti tuodaan sivulle siihen kohtaan mihin se HTML-dokumentin elementtivirrassa tulee vastaan.
Esimerkki: Elementti oletusasemoinnilla

Relatiivinen sijoittelu

position: relative

Elementin asemointipiirteen arvolla relative on muuten kuten static, mutta elementtiä voidaan siirtää oletuspaikaltaan käyttäen piirteitä left top right ja bottom.
Esimerkki: Suhteellinen asemointi (relative)

Relatiivinen sijoittelu

position: absolute

Elementin asemointipiirteen arvolla absolute tuo elementin pois elementtivirrasta ihan "omaan piirtotasoonsa", jossa sen sijainti määritellään suhteessa sivun koordinaatistoon. Asemointi sivulla tapahtuu piirteiden left top right ja bottom avulla; sivun vasemman yläkulman koordinaatti on 0,0.
Esimerkki: Absoluuttinen asemointi (absolute)

Relatiivinen sijoittelu

position: fixed

Elementti voidaan sitoa sivun sijasta myös selainikkunaan, tällöin asemointipiirteen arvoksi annetaan fixed. Ero tulee näkyviin ikkunaa vieritettäessä, selainikkunaan (piirteiden left top right ja bottom avulla) sidottu elementti pysyy paikoillaan vaikka sivun muu sisältö liikkuu. Tämä asemointitapa toimii joissain selaimissa (IE) epäluotettavasti.
Esimerkki: Kiinteä asemointi (fixed)

4.11.3 Kellutus

Edellisillä tavoilla ei kuitenkaan saa sijoitelluksi elementtiä (esimerkiksi kuvaa) siten, että muut elementit täyttävät jäljellen jääneen tilan (esim. teksti kiertää kuvaa). Absoluuttisessa ja kiinteässä asemoinnissa elementti irroittetaan elementtivirrasta. Koska elementti sijoitetaan paikalleen ihan omassa, muusta sivusta erillisessa, "maailmassaan", ei muulla sivulla ole sivua skaalattaessa tietoa siitä missä absoluuttisesti asemoitu elementti loppuu. Ei siis ole keinoa sitoa muita elementtejä sijaitsemaan näin asemoidun elementin jäljessä. Siksi saattaa olla tarpeen "kelluttaa" elementti absoluuttisen sijoittelun asemasta.

float

float: left|right|none|inherit;
[W3C] [MDN] [W3school]

Elementti voidaan kelluttaa (float) oikealle tai vasemmalle, jolloin se siirtyy horisontaalisesti niin kauas vanhempielementtinsä reunaan kuin mahdollista. Kellutus voi tapahtua vain horisontaalisessa suunnassa. Kellutus ei vaikuta kellutettavaa elementtiä edeltäviin elementteihin, mutta sen jälkeen tulevat elementit täyttävät vapautuvan tilan kiertäen kellutettua elementtiä.

clear

clear: left|right|both|none|inherit;
[W3C] [MDN] [W3school]

Elementti, jonka piirtymiseen kellutettu elementti vaikutti, voi estää vaikutuksen clear piirteen avulla. Piirteen arvo left "puhdistaa" elementin vasemman reunan, vastaavasti piirteen arvo right oikean reunan ja antamalla piirteelle arvon both saadaan aikaan molemmat vaikutukset.

4.11.4 Elementtien näyttötapa

display: block|inline|inline-block|none|inherit[tässä ei kaikki];
[W3C] [MDN] [W3school]

Aiemmin todettiin, että elementit voidaan luokitella lohkotason- ja rivitason elementteihin. Itse asiassa kyse on elementin piirteen display oletusarvosta. Ne elementit, joiden display-piirteen oletusarvo on block (esim. <p>) luokiteltiin lohkotason elementeiksi, ja ne elementit, joilla oletusarvo on inline (esim. <strong>) luokiteltiin rivitason elementeiksi.

Lohkotason elementille on tyypillistä paitsi, että se erotetaan muista elementeistä rivinvaihdolla, myös, että se varaa iselleen horisontaalisesti tilaa 100% äiti-elementtinsä leveydestä. Rivitason elementti varaa tilaa vain täsmälleen sisällön tarpeen mukaisen lokeron. Jos rivitason elementti jatkuu useammalle riville, uudella rivillä se varaa itselleen uuden lokeron.

Piirteen arvo voidaan kuitenkin muuttaa oletusarvosta. Jos esimerkiksi kappale-elementin (<p>) display-piirteen arvoksi annetaan inline, peräkkäiset kappaleet kirjoittuvat yhteen, ja vastaavasti vahvennetut tekstinosat (<strong>) erotettaisiin muista elementeistä rivinvaihdolla, jos sen display-piirteen arvoksi annettaisiin block.

Näiden kahden risteymällä, elementillä, jonka display-arvo on inline-block on lohkotason elementin lokeromalli, mutta silti se käyttäytyy muuten kuten rivitason elementti (ei erotu muista elementeistä rivinvaidolla).

Arvo none on yhdessä jonkin skriptikielen kanssa käytettynä hyödyllinen. Sen avulla elementti voidaan kääntää näkymättömäksi. Näkymätön elementti ei varaa tilaa elementtivirrasta ja dokumentti käyttäytyy kuten elementtiä ei olisi lainkaan olemassa.

Piirteellä on iso valikoima muitakin arvoja, joita ei kaikkia käydä tässä läpi, mutta elementti voidaan niiden avulla saada käyttäytymään mm. kuten listan rivi, taulukko, tai jokin taulukon osa.

Takaisin ylös

4.12 Mukautuva suunnittelu

John Allsoppin artikkeli A Dao of Web Design (2000) oli aikoinaan merkittävä www-sivujen suunnittelulle. Samaan tapaan Ethan Marcotten kirja ja artikkeli Responsive Web Design (2010) antoi nimen ja kirjoitti näkyväksi periaatteet, joita CSS3:n uusi mediakysely-mahdollisuus antoi.

Tausta-ajatuksena on, että aiemmin käytäntönä ollut tapa pyrkiä luomaan sivuista erilliset mobiiliversiot, alkoi laitteistokirjon kasvaessa osoittautua kestämättömäksi käytännöksi. Jos sivuston sisällöstä kirjoitetaan vain yksi versio, joka edellä kuvatulla tavalla kirjoitetaan lineaariseksi elementtien virraksi, mediakyselyiden avulla voidaan tilanteen mukaan tuottaa samasta sisällöstä kullekin laitteelle sopiva visuaalinen sommittelu.

Saman Resposive Design -ajatuksen muunnelmista on käytetty mm. nimityksiä progressive enhancement, content focused tai mobile first -suunnittelu. Sivun sisällön esittämiselle suunnitellaan erilliset rautalankamallit riippuen sen laitteen ominaisuuksista, jolla sivua katsotaan. Rautalankamallit toteutetaan omina CSS-tiedostonaan, ja valinta kulloinkin käytettävästä CSS-tiedostosta tehdään mediakyselyn antaman vastauksen perusteella.

4.12.1 Mediakyselyt

@media media-type [and (media-feature-experssion)]*
[W3C] [MDN] [W3school]

Mediakyselyt-moduuli on yksi jo valmiista CSS3-standardeista (valmistui 1012). Sen avulla WWW-sivu voi tiedustella selaimelta ovatko tietyt ehdot voimassa siinä ympäristössä, jossa dokumenttia ollaan esittämässä. Kyselyssä tiedustellaan ensin laitetta (mediatyyppi, (media-type)), ja sen jälkeen yhden tai useammman mediapiirteen (media feature expression) voimassaoloa. Mediakyselyä voi käyttää myös kuten valitsinta, esimerkiksi

@media screen and (max-device-width: 480px) {
  .column {
     float: none;
  }
}

Mediakysely voidaan yhdistää myös <link>-elementtiin, jolloin sen avulla voidaan valita koko käytettävä tyylipohja, esimerkiksi:

<link rel="stylesheet" type="text/css"
  media="screen and (max-device-width: 480px)"
  href="mobiili.css" />

Yleisin mediatyyppi on screen; muut mahdolliset ovat: braille, embossed, handheld, print, projection, speech, tty ja tv.

Mahdolliset mediapiirteet ovat:

Mediapiirre Arvo Kuvaus
width mittayksikkö ikkunan leveys
height mittayksikkö ikkunan korkeus
device-height mittayksikkö laitteen korkeus
device-width mittayksikkö laitteen leveys
orientation portrait|landscape pysty/vaaka -orientaatio
aspect-ratio luku width/height
device-aspect-ratio kokonaisluku/kokonaisluku kuvasuhde
color kokonaisluku värisyvyys
color-index kokonaisluku indeksoitujen värien lukumäärä
monochrome kokonaisluku mustavalkoisen näyttöympäristön värisyvyys
resolution "dpi" tai "dpcm" resoluutio
scan "progressive" tai "interlaced" "tv" mediatyypin arvoja
grid kokonaisluku tosi, jos laite on grid-pohjainen

Mediakyselyistä ja mukautuvasta suunnittelusta tarkemmin kiinnostuneita kehotetaan lukemaan esimerkiksi seuraavat hyvät artikkelit:

Takaisin ylös