5.1 CSS-muotoilukieli
Muotoillaan sivuja
CSS (lyh.Cascading Style Sheets) on tekniikka ja merkkauskieli, jolla määritellään ulkoasu HTML-kielellä merkatulle html-dokumentin (sivun) rakenteelle ja sen elementeille. Viimeisin versio muotoilukielestä on CSS4 ja se julkaistiin 24.3.2017. CSS on kehittynyt, muotoutunut ja kasvanut ominaisuuksiensa puolesta vuosien varrella ja siitä syystä sanotaan, että uudempia versioita ei voi oppia tuntematta aiempia versioita. Tämä tarkoittaa yksinkertaisesti sitä, että määrittelyt ovat kirjava kokoelma eri versioista peräisin olevia komentoja. Opetellaan siis CSS-kielen perusteet ja opitaan muotoilemaan omia WordPress-sivuja uniikkiin muotoon.
Muotoilut kolmella eri tasolla
CSS-muotoilu voidaan toteuttaa kolmella eri tasolla. Tämä tarkoittaa että:
- Voimme asettaa muotoilut koskemaan koko sivustoa, jolloin kaikki asetetun CSS-määrityksen sisältävät elementit saavat asetetun muodon. Usein esimerkiksi typografian (fonttien) perusasetukset asetetaan sivustonlaajuiseen CSS-muotoiluun.
- Yksittäisen sivun laajuudessa asetettu muotoilu koskee vain muotoilun sisältävän sivun elementtejä, joihin CSS-muotoilu viittaa. Sivun sisäistä CSS-muotoilua käytetään esimerkiksi tilanteessa, jossa tietyltä sivulta halutaan piilottaa jokin joka sivulla toistuva elementti.
- Elementin sisäisesti, jolloin määritykset kohdistuvat vain elementtiin, jossa muotoilut ovat. Tällaista muotoilutekniikkaa käytetään tapauksessa, jossa halutaan jollekin tietylle elementille joitain erityisiä piirteitä.
Muotoilujen hierarkia
Sivuston, sivun ja elementin laajuisien muotoilujen välillä on hierarkia. Elementin sisäinen muotoilu on vahvin muotoiluista ja sen määritykset korvaavat sivukohtaiset ja sivustokohtaiset määritykset niiltä osin, kuin ne kohdistuvat samaan ominaisuuteen. Samaan tapaan sivukohtaiset muotoilut korvaavat sivustokohtaiset samaan ominaisuuteen kohdistetut muotoilut. Voidaan siis sanoa, että mitä pienemmälle alueelle sivustoilla CSS-muotoilu kohdistuu sitä vahvempi se on.
Esimerkki:
Jos sivustolla on asetettu h2-otsikkoon fonttikoko 24px sivuston laajuisessa CSS-muotoilussa ja asetetaan sivu- tai elementin laajuisessa muotoilussa sille määre 33px. Seurauksena on, että selaajalle otsikko esiintyy sivulla 33px fonttikoossa. Fonttikoko 24px siis korvataan määrityksellä 33px, koska sivu- ja elementtikohtainen muotoilu yliajaa sivustokohtaisen muotoilun. Toisaalta taas jollain muulla sivuston sivulla sama h2-otsikko esiintyy 24px fonttikoossa.
!important
Hierarkiaa voidaan myös rikkoa asettamalla esimerkiksi sivustonlaajuisessa muotoilussa arvon perään merkkaus !important, jolloin se yliajaa kaikki muut muotoilut vaikka ne on asetettu elementille itselleen. !important-merkintää tulee käyttää erittäin harkiten, jos lainkaan sillä se lukitsee kaikki mahdollisuudet vaikuttaa muutoin muotoiluun.