Tyylien ominaisuuksien periytyminen

Tyylin ominaisuudet voivat periytyä toiselle tyylille. Ominaisuuden periytyminen tapahtuu elementtien vaikutusalueiden mukaan. Periytymisen yhteydessä puhutaan usein vanhempi- ja lapsi-elementistä tai ylemmän ja alemman tason elementistä. Vanhempi-elementillä eli ylemmän tason elementillä tarkoitetaan rakenteellisesti ulompana olevaa XHTML-elementtiä, jonka sisällä on lapsi eli alemman tason -elementti. Tyypillinen esimerkki vanhempi-elementistä eli ylemmän tason elementistä on body-elementti, jonka sisälle tulevat kaikki XHTML-dokumentin sisällön rakennetta kuvaavat elementit. Lapsi-elementistä eli alemman tason elementistä hyvin tyypillinen esimerkki on p-elementti. Tyylin ominaisuudet periytyvät esimerkin tapauksessa body-elementiltä p-elementille, jos p-elementissä ei ole määritelty kyseistä ominaisuutta.

Kaikki elementtien ominaisuudet eivät ole periytyviä!

Seuraavassa esimerkissä tarkastellaan tyylien ominaisuuksien periytymistä. Esimerkin body-tyyliin tehty väriominaisuus color periytyy automaattisesti body-elementin sisällä oleviin XHTML-elementteihin. Esimerkin body-tyylin taustaväriksi on määritetty keltainen ja tekstinväriksi on määritetty musta. XHTML-dokumentissa h1- ja p-elementit sijoitetaan aina body-elementin sisälle. Esimerkin tapauksessa h1-elementin sisällä oleva teksti on mustaa, koska ominaisuus periytyy body-elementistä. p-elementin tekstin väri on keltainen, koska väri on määritelty uudelleen p-elementissä. p-elementin sisään tulevalle strong-elementille periytyy p-elementiltä keltainen tekstin väri. Myös kirjasinperheen ( font-family) ominaisuudet periytyvät body-elementistä h1- ja p-elementtiin. Kirjasinperheen määritykset eivät kuitenkaan periydy strong-elementille, koska elementille on määritelty omat kirjasinperheen määritykset.

body {
color: black;
background-color: yellow;
font-family: verdana, sans-serif;
}
h1 {
text-align: center;
}

p {
color: yellow;
background-color: black;
}
strong {
font-family: courier, monospace;
}

Seuraavassa kuvassa edellisen esimerkin tyyleillä muotoiltu XHTML-dokumentti.

Aivan kaikki tyylien ominaisuudet eivät kuitenkaan periydy. Esimerkiksi background-color-ominaisuus ei kuulu periytyvien ominaisuuksien joukkoon. Ominaisuus näyttää periytyvän, koska esimerkiksi body-tyylin background-color-ominaisuus näkyy h1-tyylisen kappaleen taustan läpi, koska h1-tyyliin ei ole määritelty omaa background-color-ominaisuutta vaan tausta on oletuksena läpinäkyvä.

Perinnän avulla tyylitiedostoon ei tarvitse kirjoittaa kaikkien ominaisuuksien tyylimäärittelyjä. Esimerkiksi body-tyyliin määritellyt ominaisuudet joitakin poikkeuksia lukuunottamatta periytyvät body-elementin sisällä oleville elementteille.