CSS – Muotoillaan sivuja
CSS (lyh.Cascading Style Sheets) on tekniikka ja merkkauskieli, jolla määritellään ulkoasu HTML-kielellä kuvatulle rakenteelle ja sivulla oleville elementeille. CSS:llä voidaan määritellä siis muotoilu myös sivulla olevaan sisältöön. 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 kolmessa laajuudessa – Sivuston laajuudessa, sivun sisällä tai sivulla olevassa elementissä.
1. Sivuston laajuudessa
Voimme asettaa CSS-muotoiluja sivuston laajuisesti, jolloin muotoiluja voidaan käyttää sivuston jokaisella sivulla. Sivuston laajuiset CSS-määrittelyt asetetaan WordPressissä joko Ulkoasu/Mukauta -toiminnon Oma CSS-osiossa tai käyttäen Ulkoasu/Teemaeditori -toimintoa. Jos asetamme sivuston laajuisia määrittelyjä, ne sijoitetaan erilliseen CSS-tiedostoon, jota kutsutaan jokaiselle sivulle sen head-osiossa.
2. Yksittäisen sivun laajuudessa
Yksittäiselle sivulle voidaan määrittää CSS-määrittelyjä, jotka ovat voimassa vain sivulla johon ne on asetettu. Yksittäisen sivun CSS-muotoiluja ei voida asettaa WordPressin omilla editoreilla (Classic tai Gutenberg) vaan on asennettava joko lisäosa tai otettava käyttöön jokin edistyneemmistä editoreista (WP Bakery Editor, Visual Composer tai Elementor PRO-versio).
Perinteisesti html-dokumentissa, joka yksittäinen sivu on, sivunsisäiset CSS-muotoilut sijaitsevat sivun head-osassa tagien <style> </style> sisällä.
On huomattava, että jos sivun sisäinen määritys vaikuttaa sivuston laajuisen määrityksen kanssa samaan elementtiin vastaavalla määrityksellä se korvaa sivuston laajuisen määrityksen ja jää voimaan. Sivun sisäisellä määrittelyllä voidaan siis ns.”yliajaa” sivuston laajuinen määritys.
Esimerkki:
Olemme määrittäneet sivuston laajuisella määrityksellä otsikon h1 värin punaiseksi #ff0000 ja asetamme sivun sisäisellä määrityksellä fontin väriksi sinisen #00ff00. Lopputuloksena sivulla oleva h1-fontti näkyy sinisenä, koska sivun sisäinen määritys yliajaa sivuston laajuisen määrityksen.
3. Elementin laajuisesti
Jos haluamme asettaa jonkin tietyn elementin ominaisuudet eroamaan ”yleisestä linjasta”, joka on asetettu sivuston laajuisissa tai yksittäisen sivun laajuisissa asetuksissa, voimme käyttää CSS-muotoilua suoraan html-elementissä <style=”määrittelyt;”> merkkauksen avulla.
Huomaat varmaan, että tämän tekstikappaleen otsikko näkyy punaisena. Otsikko on h4-tason elementti ja sen väri on asetettu sivuston laajuisessa CSS-määrittelyssä mustaksi. Olen kuitenkin asettanut html-koodiin h4-otsikon tagiin CSS-määrityksen, että tämä kyseinen otsikko tulee näyttää punaisena #ff0000, jolloin se yliajaa kaikki muut määrittelyt.
CSS-työkaluja lisäosina
Useat sivustoeditorit sisältävät mahdollisuuden lisätä sivukohtaisia CSS-muotoiluja. Elementor-editorissa ominaisuus on kuitenkin vain Pro-versiossa. Jos haluat rakentaa sivujasi Elementor-editorilla ja lisäksi asettaa omia sivun sisäisiä CSS-muotoiluja, joudut käyttämään lisäosaa, jonka avulla muotoilut voidaan asettaa Classic-editorin puolella.
WP Add Custom CSS
Lisäosa lisää CSS-editorin Classic -sivueditoriin sivun muokkausnäkymään, jonka avulla voidaan lisätä CSS-tyylimäärityksiä sivun head-osaan (metatiedot).
Lisäosa on kätevä, jos käytetään vain Classic-editoria sivujen rakentamiseen tai Elementorin perusversioa. Lisäosassa on myös mahdollista asettaa koko sivuston laajuisia CSS-määrityksiä itse lisäosan asetuksien kautta. Hyvä ominaisuus on myös koodin edistyneet muotoilut, joiden avulla saa koodiin näkyviin rivinnumeron ja korostetut tagit.
Simple Custom CSS and JS
Mukauta WordPress-sivuston ulkoasua lisäämällä mukautettuja CSS- ja JS-koodeja helposti muokkaamatta teeman tiedostoja. Lisäosa tarjoaa kätevän tavan lisätä mukautettuja CSS-säätöjä sivustoon. Itse käytän tätä lisäosaa useilla sivustoillani.
Lisäosan ominaisuuksia:
- CSS-koodi syntaksikorostuksella
- Tulosta koodi jokaisen sivun head-osaan tai sisällytä se ulkoiseen CSS-tiedostoon
- Tulosta koodi head- tai footer-osassa
- Koodaamalla tehdyt muutokset säilyvät teemaa vaihdettaessa
CSS-koodi ja mittayksiköt
Kuten esillä olevasta koodista huomaamme peruskäskyt CSS-koodissa ovat melko yksiselitteisiä. Fontti määritellään määritteellä font-family (Fonttiperhe), font-size (Fonttikoko) pikseleinä ja rivin korkeus line-height -määritteellä jne.
Fonttien koot pyritään asettamaan usein niin, että h1-otsikkotaso on kooltaan suurin. Sehän on sivun pääotsikko käytännössä. Toki poikkeuksiakin on eikä koko ole millään tavoin sääntö vaan valinta-asia. Voimme myös määritellä sen esimerkiksi jollain muista fonteista eroavalla fontilla. Ohessa on esimerkki tämän sivuston otsikoiden fonttimäärityksistä ja voit havaita, että otsikoiden koot on määritelty pienenemään mitä alemman tason otsikko on kyseessä. Tämä on perinteinen tapa käsitellä fonttien hierarkiaa mutta ei suinkaan sääntö.
Tekstin mittayksikkönä itse käytin aiemmin pikseliä (px). Myöhemmin olen alkanut käyttää suhteellista mittayksikköä rem, joka on nykyään suositellumpi tapa.
Jos päädyt käyttämään pikseleitä on tärkeää tarkistaa fonttien koon sopivuus eri näyttölaitteilla ja tarvittaessa luonnollisesti tehdä myös mediamäärittelyt fonteille, jotta sivuista tulee responsiiviset myös typografian kannalta. Tulemme mediamäärittelyihin myöhemmin tarkemmin.
Otsikko h1
Otsikko h2
Otsikko h3
Otsikko h4
Otsikko h5
Otsikko h6
Esimerkkinä tämän sivuston otsikot ja niiden muotoilut listattuna.
Responsiivisuus – Mediamäärittelyt
Kuten Typografia-osiossa mainitsin, sivustojen typografiassa fonttien koko joudutaan määrittelemään eri näyttölaitteille sopiviksi, jotta sivuista tulee responsiiviset. Fonttien kohdalla responsiivisuus toteutetaan mediamäärityksillä (Media queries) ja ne esiintyvät CSS-määrittelyissä seuraavaan tapaan:
/* Mediamääritys asettaa alle 768 pikseliä leveillä näyttölaitteilla H1-elementin tekstille punaisen fontin. */
@media (max-width: 768px) {
h1 {
color:#ff0000;
}
}
Mediamäärityksessä voidaan käyttää @media tilalla esimerkiksi @print, jolloin määritys tulee voimaan vain tulostettaessa. Määrityksen max-width tilalla voidaan käyttää määreitä min-width tai width jne. Lisätietoa mediamäärityksestä voit lukea W3Schools artikkelista.
/*FONTTIMÄÄRITTELYT*/
/*Otsikot*/
h1 {
font-family: 'Montserrat Alternates', sans-serif;
}
h2, h3, h4, h5, h6 {
font-family: 'Open Sans', sans-serif;
}
h1 {
font-size: 48px;
font-weight: 400;
line-height: 65px;
letter-spacing: -1px;
padding: 12px 0 5px 0;
}
h2 {
font-size: 32px;
line-height: 32px;
font-weight: 400;
letter-spacing: -1px;
padding: 12px 0 5px 0;
}
h3 {
font-size: 27px;
line-height: 27px;
font-weight: 400;
letter-spacing: -1px;
padding: 12px 0 5px 0;
}
h4 {
font-size: 23px;
line-height: 23px;
font-weight: 600;
letter-spacing: -1px;
padding: 20px 0 5px 0;
}
h5 {
font-size: 20px;
line-height: 20px;
font-weight: 400;
letter-spacing: -1px;
padding: 12px 0 5px 0;
}
h6 {
font-size: 18px;
line-height: 18px;
font-weight: 400;
letter-spacing: -1px;
padding: 12px 0 5px 0;
}
/*Leipätekstit*/
p, ul > li, ol > li {
font-family: 'Martel Sans', sans-serif;
letter-spacing: -.1pt;
font-size: 20px;
font-weight: 400;
line-height: 1.4;
}
b, strong {
letter-spacing: 0;
font-weight: 600;
}