Tämän esimerkkisivun BODY-elementti on jaettu neljään päälohkoon:
body
|
|__ Logolohko (div#logo)
|
|__ Otsikkolohko (h1)
|
|__ Pääsisältölohko (div#sisalto)
|
|__ Navigointilohko (div#navigointipalkki)
Kaikki sivun ulkoasumääritykset löytyvät lähdekoodin STYLE-elementistä.
Tällä tarkoitetaan sitä, että kaikki mahdollinen on pyritty määrittelemään suhteellisesti, jotta sivun sommittelu mukautuisi mahdollisimman hyvin erilaisiin tilanteisiin. Voit kokeilla miten sivu mukautuu erilaisiin asetelmiin esim. muuttamalla kirjasinkokoa ja/tai muuntelemalla selainikkunasi kokoa.
Tässä esimerkissä CSS-sommittelu on suunnattu ainoastaan näytölle ja samalla piilotettu vanhemmilta selaimilta @media screen -säännöllä. Laajemmissa toteutuksissa tyyliehdotukset kannattaa ulkoistaa ja piilottaminen toteuttaa esim. @import-säännöllä.
