4.5 HTML ja CSS
HTML – Sivun perusrakenne
Jotta ymmärrämme paremmin html-sivua on hyvä ymmärtää html-merkkauksesta ja html-dokumentin (sivun) rakenteesta ainakin perusasiat. Seuraavassa tutustumme sivun eri osiin ja millä tavalla osat voidaan erottaa koodissa. Katsaus on todella pintapuolinen ja tarkoituksena on lähinnä vain oppia ymmärtämään millä tavalla sivuston muotoiluun voi vaikuttaa CSS:n avulla. Tämän sivun ohella kannattaa ehdottomasti tutustua w3school-sivuston tarjontaan, joka on mammuttimainen html- ja CSS-määrittelyjen tietosivusto.
Sivun metatiedot (head)
Sivun, toisin sanoen html-dokumentin, meta-tiedot sijaitsevat dokumentin <head> => </head>-tagien välissä. Metatiedot on merkattuna meta-tagilla seuraavaan tapaan:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Pituudeltaan max.160 merkkiä pitkä (155-160) kuvausteksti sivun sisällöstä.">
<meta name="google-site-verification" content="+nxGUDJ4QpAZ5l9Bsjdi102tLVC21AIh5d1Nl23908vVuFHs34=">
<title>Sivun otsake (max.70 merkkiä, pyritään 55-60 merkkiä)</title>
<meta name="robots" content="noindex,nofollow">
Sivun metatiedot head-osassa tarjoavat esimerkiksi hakukoneille tietoa sivusta ja sen sisällöstä ja hakukoneet ja sosiaalisen median alustat käyttävät tietoja sivun esittelemiseen hakutuloksissa tai jaettaessa sivu sosiaalisessa mediassa.
Metatiedot voidaan asettaa manuaalisesti mutta WordPress sisältää lisäosia, joilla voidaan metatiedot hoitaa ilman koodaamista. Lisäksi WordPress itsessään asettaa tiettyjä metatietoja, kuten sivun otsakkeen (<title>).
Sivun head-osiossa voidaan asettaa myös linkittää sivulle ulkoisia tiedostoja (esim. CSS-muotoilutiedostot ja Javascript jne). Head-osioon voidaan myös asettaa suoraan sivun sisäistä CSS-muotoilukoodia ja ladata sivuston ulkoisista lähteistä toimintoja käyttöön (esim. fontteja).
Tietty perusrakenne toistuu kaikissa html-dokumenteissa. Miltei kaikilta sivustoilta löytyy header (ylätunniste), jossa tavallisesti ilmenee sivun navigointivalikko (menu). Footer eli alatunniste on lohko sivun alalaidassa , jonka alapuolella saattaa joskus sijaita subfooter-osa, jossa monesti esitetään sivuston copywrite-teksti. Header– ja Footer-osan välissä on sivun varsinainen sisältö-osa. WordPressissa juuri sisältö on osa, johon kaikilla sisältöeditoreilla luodaan sisältöä. Headerin ja footerin sisältöön vaikutetaan muualla WordPressin asetuksissa.
Sisältöosassa saattaa olla myös sivupalkki (aside) tavallisesti sivun oikeassa laidassa. Syy miksi sivupalkin paikka on oikeassa laidassa on se, että sivupalkki on tarkoitettu sivuhuomautustyyppiselle tiedolle, kuten sivustolta löydät myös tms. Sivupalkissa esitetään usein erilaisia vimpaimia (Widgets) WordPress-sivuilla. Lisäksi sivupalkin käyttö on ehkä yleisintä artikkelisivuilla. Oheisessa videossa pyritään havainnollistamaan html-dokumentin rakennetta tarkasteltaessa sivun lähdekoodia.
Avaa esimerkki tyhjästä sivusta ja tarkastele sivun rakennetta lähdekoodista selaimen kehittäjäntyökalulla.
Perusrakenteen tagit
HTML-sivun rakenne koodissa on jaettu oheisiin sivun osia kuvaaviin tageihin. Koodissa on siis kuvattuna erittäin yksinkertaistettuna html-sivun rakenne ja osien sisältämät sivun osat.
<!DOCTYPE html>
<html lang="fi">
<head>
(Sisältää sivun metatiedot, kuten linkit CSS-tiedostoihin, muut meta-tagit, linkitykset yms.)
</head>
<body>
(Sivun näkyvä sisältö alkaa)
<header></body>(Sivun näkyvä sisältö päättyy)
(Sivun header ylätunniste, joka toistuu tavallisesti samanlaisena joka sivulla. Header osa sisältää yleensä päänavigoinnin ja logon yms.)
</header>
<main>
(Sivun pääsisältö kiedotaan usein main-tagien sisään. Main tagin sisällä voi olla myös aside. Main-tagi on sivun vaihtuvaa sisältöä. Se on myös sivun pääsisältö)<aside></main>
(Aside on sisällön toissijaista sisältöä. WordPressissä aside-elementtiä edustavat esim. widgetit (vimpaimet))
</aside>
<footer>
(Aside on sisällön toissijaista sisältöä. WordPressissä aside-elementtiä edustavat esim. widgetit (vimpaimet))
</footer>
</html>
Sisäkkäinen rakenne (sisäkkäisyys)
HTML-koodissa elementit asettuvat aina koodissa sisäkkäin. Helpoin tapa ymmärtää sisäkkäisyys on ajatella HTML-tunnisteita laatikoina, jotka sisältävät html-elementin sisältöä sisällään. Ne voivat sisältää tekstiä, kuvia ja niihin liittyvää mediaa. HTML-tunnisteet ovat ruudut sisällön ympärillä. Joskus sinun on sijoitettava laatikot muihin laatikoihin. Nämä ”sisäiset” laatikot ovat sisäkkäin muiden sisällä. Oheisessa koodissa voit havaita koodin sisäkkäistä rakennetta, jossa eri div-lohkoelementit ovat sisäkkäin ja sisimmän elementin sisäpuolella ovat otsikko Vaella Kanssamme ja tekstielementti.
Kirjoittaessa HTML-merkkausta on käytännössä tärkeintä muistaa:
- Asettaa jokaiselle elementille lopetustagi
- Asettaa elementit symmetrisesti sisäkkäin ja huolehtia, ettei minkään elementin lopetustagi ulotu ympäröivän elementin lopetustagin jälkeen.
<div class="range">
<div class="cell-lg-6 cell-md-7 cell-sm-8" data-caption-animate="fadeInUp" data-caption-delay="100"></div>
<div class="swiper__overlay swiper-overlay-end box-skew box-skew-var-2"></div>
<div class="swiper-overlay-item-1"></div>
<h2 class="yellow-text">Vaella kanssamme</h2></div>
<p class="yellow-text">Tarinat kuljettavat myös reiteille, jotka puuttuvat perinteisistä vaellusoppaista.</p>
Käytetyimmät HTML-tagit
HTML:ssä sivun sisältö laitetaan tagien sisään. Tageilla kerrotaan selaimelle mikä ja minkä luonteinen sisältö on kyseessä. Tagi mahdollistaa myös, että sisältöä voidaan muotoilla CSS:n avulla kohdistamalla muotoilut haluttuun tagiin.
<p>Lorem</p>
Tavallinen tekstielementti, jonka sisällä on yksi tekstikappale
<i>Lorem</i>
Tekstielementti, joka muuntaa tekstin kursivoiduksi (italic). Tekstielementti kiedotaan tavallisesti normaalin <p> elementin sisään.
<b>Lorem</b> tai <strong>Lorem</strong>
Tekstielementti, joka muuntaa tekstin lihavoiduksi (bold). Tekstielementti kiedotaan tavallisesti normaalin <p> elementin sisään.
<span>Lorem</span>
Tekstin keskellä voidaan tehdä <span style=”color=#ff0000;”>erityisiä muotoiluja</span> ja liittää elementtiin suoraan muotoiluja div-elementin tavoin.
[/lvca_panel][lvca_panel panel_title=”Listaelementit”]
<ul><li>Lorem</li></ul>
- Numeroimaton lista.
- Merkinnän rakenteessa ul (unordered list) ympäröi li (list) -listaelementtejä.
<ol><li>Lorem</li></ol>
- Numeroitu lista.
- Merkinnän rakenteessa ol (ordered list) ympäröi li (list) -listaelementtejä.
[/lvca_panel][lvca_panel panel_title=”Otsikot (Heading)”]
<h1>
Pääotsikko, jota saa jokaisella sivulla olla vain yksi kappale.
<h2> <h3> <h4> <h5> <h6>
Alaotsikot, joita voi esiintyä sivulla useita kappaleita.
Otsikoiden käyttäminen sivulla
Otsikoissa kannattaa käyttää hierarkiaa. H2-otsikon alaisena voi olla H3-elementtejä ja sen alaisuudessa H4-otsikoita jne. Mitä suurempi otsikkoelementin numero on sitä pienempi otsikko on.
<div id=”selektori”></div>
Div-elementillä voidaan merkata elementtikokonaisuuksia. ID-elementin selektori tulee olla yksilöllinen sivulla ja sitä ei tule käyttää useampaan kertaan.
<div class=”selektori”></div>
Div luokkaelementillä (class) voidaan merkata elementtikokonaisuuksia ja samalla selektorilla merkattuja div-luokkaelementtejä voi olla sivulla useampia.
<div style=”CSS-määrittelyt”></div>
Div elementtiin voidaan asettaa suoraan muotoilut, jolloin ne vaikuttavat divin sisällä oleviin elementteihin.
<img src=”kuvan domain (url)” alt=”vaihtoehtoinen teksti” />
Kuva lisätään sivuille img src (Image Screen) elementillä. Kuvaelementtiin tulee lisätä myös alt (alternative) vaihtoehtoinen teksti.
<a href=”linkin verkko-osoite (url)” target=”mihin avataan”>linkitettävä kohde</a>
Linkin merkintätapa HTML:ssä on kirjain ”a”. Linkin tiedot ilmoitetaan elementillä ”href” ja linkin kohde ilmoitetaan määrittelyllä ”target”. Kohteena voivat olla esimerkiksi ”_blank”, joka avaa linkin selaimen uuteen välilehteen. Ilman target-määrittelyä linkki avataan aina samaan välilehteen. Itse käytän tavallisesti sivuston sisäisten linkkien kohdalla samaan välilehteen avautuvaa ja ulkoiset linkit asetan avautumaan uuteen välilehteen.
<br /> tai <br>
Joskus saattaa tulla tilanne, jolloin on tehtävä tekstissä pakotettu rivinvaihto ja se tehdään ”br” (break) -elementillä. Kauttaviivalla oleva elementti on tuttu xhtml-standardista, jossa kaikki elementit tulee päättää ja niin myös yksittäiset elementit kuten tämä. HTML5-standardi ei vaadi kauttaviivaa merkkauksessa, vaan se voidaan merkitä jälkimmäisellä tavalla.
<hr /> tai <hr>
Jos haluamme luoda vaakasuoran jakoviivan esimerkiksi tekstikappaleiden väliin, se tehdään ”hr” -elementillä (Horizontal). Myös tässä elementissä kauttaviivalla oleva elementti on tuttu xhtml-standardista, jossa kaikki elementit tulee päättää kauttaviivalla ja niin myös yksittäiset elementit kuten tämä. HTML5-standardi ei vaadi kauttaviivaa merkkauksessa, vaan se voidaan merkitä jälkimmäisellä tavalla.
Lisätietoa HTML:stä
HTML:stä ja kaikesta siihen liittyvästä voit lukea enemmän w3schools-sivustolta, joka on ylivoimaisesti laajin html-merkkauksesta kertova sivusto. Sivustolta löydät paljon myös harjoituksia html-merkkaukseen liittyen ja sivuston kautta voit suorittaa myös testejä html-osaamisesta. w3schools on tunnetusti paras tiedonlähde, kun tarvitsee saada tietoa html-merkinnöistä ja kuinka ne tulee asettaa, jotta selain esittää ne oikein.
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 Classic-editorilla ja kaipaat mahdollisuutta lisätä sivulle CSS-määrityksiä, joudut toteuttamaan sen lisäosan avulla sillä peruseditori ei tarjoa mahdollisuutta lisätä CSS-koodia.
WP Add Custom CSS
Lisäosa lisää CSS-editorin Classic -sivueditoriin sivun muokkausnäkymään. Editorin avulla voidaan lisätä CSS-tyylimäärityksiä sivun head-osaan.
Lisäosa on kätevä, jos käytetään vain Classic-editoria sivujen rakennukseen. 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 teema- tai laajennustiedostoja. Lisäosa tarjoaa kätevän tavan lisätä mukautettuja CSS-säätöjä sivustoon.
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), Fontin koko (font-size) pikseleinä ja rivin korkeus line-height -määritteellä jne.
Fonttien koot pyritään asettamaan yleensä niin, että h1-otsikkotaso on kooltaan suurin. 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ä.
Tekstin mittayksikkönä itse käytän yleensä pikseliä (px) mutta mittayksiköitä on olemassa paljon muitakin. Voit tutustua eri mittayksiköihin ja niden käyttöön lisää w3schools -sivuilla.
Pikseleitä käytettäessä kannattaa kuitenkin aina tarkistaa fonttien koon sopivuus eri näyttölaitteilla ja tarvittaessa tehdä erilliset 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
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:
@media screen and (max-width: 900px) and (min-width: 600px) {
h1 {
font-size:41px;
}
}
Merkinnässä CSS-määrittely h1-tason otsikon fonttikoko on 41px astuu voimaan, kun näyttölaitteen leveys on välillä 600px-900px. Koodin alussa oleva merkintä @media screen on määritys, joka kertoo selaimelle, että kyseessä on näyttölaitteille tarkoitettu mediamäärittely.
Itse CSS-määritykset tulevat aaltosulkujen sisään, kuten CSS-määrittelyt yleensä. Huomaa, että mediamäärittelyyn myös aaltosulut, joiden sisään asetetaan normaalisti CSS-määrityksiä. Saman mediamäärittelyn aaltosulkujen sisään voidaan asettaa rajaton määrä CSS-määrityksiä, jotka kaikki astuvat voimaan mediamäärittelyyn asetetussa näyttöleveydessä.
Kommentoi koodisi
CSS-tiedoston koodi kannattaa aina kommentoida, jotta tehdyt muutokset löytyvät paremmin myös pidemmän ajan päästä. Kommentointi kannattaa tehdä CSS-tiedostossa koodiesimerkin tavoin jakamalla muotoilut ryhmiin. Jos muotoiluja on paljon, saattaa olla tarpeen myös tehdä tiedoston alkuun sisällysluettelo tiedoston muotoiluista. Ainakin kommentointi on tarpeen, jotta ajan päästä tiedät mikä muotoilu on tarkoitettu millekin sivuston elementille.
Kommentit CSS-tiedostossa tehdään koodiin laittamalla kommentin eteen merkit /* ja kommentin loppuun sama toisin päin */. Näin selain tietää, että merkkijono (teksti) on kommentointia ja ei ole tarkoitus näkyä sivuilla tai CSS-tiedostossa sitä ei huomioida muotoiluna.
!important -määritys
Aiemmin mainitsin, että esimerkiksi sivukohtaiset määritykset yliajavat sivustokohtaisen määrityksen. Jos kuitenkin haluamme asettaa esimerkiksi jonkin määrityksen sellaiseksi, että se yli ajaa kaikki muut samaan elementtiin asetetut määritykset, voimme käyttää määrityksen perässä merkkausta !important.
!important -merkkausta kannattaa käyttää harkiten, sillä merkkauksen sisältävää ominaisuutta ei voi muuttaa millään muulla tavoin. Jos asetat esimerkiksi otsikon väriksi punaisen varustettuna !important -merkkauksella sivuston laajuisessa CSS-tiedostossa. Otsikon väriä ei voi muuttaa edes elementtiin asetetulla CSS-muotoilulla vaikka se muutoin yliajaisi sivuston laajuisen CSS-muotoilun.
h1 {
color:#ff0000!important;
}
Omat metodit
Itse teen omat sivustokohtaiset globaalit CSS-määrittelyt WordPressin teemaeditoriin tai käytän CSS-muotoilujen lisäosaa. Jos Käytössä on WP Bakery Editor käytän sen CSS-muotoilujen lisäystyökalua. Jos kehitän sivuja paikallisella palvelimella käytän edistynyttä tekstieditoria koodauksen muokkaamiseen (Notepad++ tai vastaava).
Tiedoston rakenteessa alkuun laitan joskus kommenttina jotain dokumentointia sivustosta, kuten sivuilla käytetyt värit yms. Mahdollista on myös luoda erillinen dokumentointi tekstitiedostona jolloin se on saatavilla WordPressin teemaeditorissa. Usein saattaa olla hyvä idea laittaa CSS-tiedoston alkuun myös sisällysluettelo, joka kertoo missä järjestyksessä määrittelyt sijaitsevat tiedostossa. Erityisen hyödyllistä se on silloin, kun tiedostoon tulee paljon määrittelyjä sillä se helpottaa määrittelyjen löytämistä melkoisesti. Pyrin myös kommentoimaan määrittelyt parhaani mukaan, jotta niistä on helpompi löytää tietty määritys.
Oikean selektorin löytämiseen käytän selaimen kehittäjän työkalua, jonka avulla voi tutkia sivuston rakennetta ja siihen vaikuttavia CSS-määrityksiä. Tutustumme selaimen kehitystyökaluun ja sen hyödyntämiseen myöhemmin tällä kurssilla.
Sivuston määrittelyt aloitan usein sivuston yleismäärittelyillä, kuten body, typografia (otsikot, leipätekstit, painikkeet, navigoinnit jne). Perusmäärittelyjen jälkeen asetan muita sivujen tekemisen myötä esiin tulevia määrittelyjä mutta pyrin ryhmittelemään ne jollain tavoin loogiseen järjestykseen ts. header-määritykset, footer-määritykset, yksittäisten sivujen määritykset, yksittäisten elementtien määritykset.
Yleisesti ottaen itselle looginen järjestys on asia, joka helpottaa tiedoston muokkausta jatkossa.
/*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;
}
Tekstilaatikko
Tehdään HTML-kielen avulla oheinen tekstilaatikko, jossa otsikko (H1) ja tekstikappale, ingressi vahvennetulla tekstillä.
Tekstikappaleiden väliin tulisi saada 5px tilat ja otsikon ja leipätekstin väliin 10px tyhjä tila.
Muotoile laatikko lohkoksi (block) ja aseta seuraavat muotoilut tekstilaatikolle:
- Otsikko: h1 koko 40px #6C258A
- Leipäteksti ja ingressi: fonttikoko 16px #2F2F2F, rivinkorkeus 24px.
- Lainaus leipätekstissä alin tekstikappale (lorem ipsum…): fontin tyyli kursivoiduksi.
- Taustaväri laatikolle: #F9F9C9
- Reunaviiva: 2px groove #E7B460
- Reunanpyöristys: 20px
- Laatikon täyte: 20px
- Aseta laatikolle sopiva sisäinen varjo verkkotyökalun avulla esim. sivulla css3studio.com
Jos käytät sivullasi sivueditoria (Elementor tms.) voit käyttää elementin tekemiseen raw HTML -elementtiä, jossa rakennetaan sivustolle elementti koodaamalla HTML-kielellä.
Jos käytät sivuilla WordPressin omaa Classic-editoria, käytä sivun sisältöeditorin Teksti-välilehteä, jossa lisätään sisältö HTML-koodilla.
Lisää muotoilut joko luokkamäärittelyn avulla sivun sisäisessä CSS-muotoilussa tai suoraan elementtiin style-merkkausta käyttäen. Jos käytät sivulla Elementor-sivueditoria, joudut käyttämään elementissä editorin RAW-html -elementtiä.
Kuvaharjoitus
Lisää edellisessä harjoituksessa tekemääsi tekstilaatikkoon otsikon tilalle kuva osoitteesta:
https://kurssit.aurinkoverkko.fi/wp-content/uploads/2021/10/lorem-ipsum.jpg
Aseta kuvalle CSS-määrityksillä pyöristetyt reunat ja keskitä kuva tekstilaatikkoon horisontaalisesti keskelle. Aseta kuvan leveydeksi 30% laatikon leveydestä.
Aseta kuvaan linkki Lorem Ipsumista kertovalle sivulle url-osoitteeseen https://www.lipsum.com ja aseta sivu avautumaan omaan välilehteen.
Aseta kuvalle myös ulkoinen varjo, joka katoaa hover-tilassa. Tee kaikki muotoilut, joko sivukohtaisilla muotoiluilla tai sivustokohtaisesti teemaeditorissa.
Typografia
Typografiassa asetetaan sivuston perusmuotoilut tekstisisällön otsikoille, leipätekstille ja muille tekstielementeille. Asetukset voidaan asettaa kuten edellä omaan CSS-tiedostoon tai esimerkiksi Elementor-editorin sivuston asetuksissa, josta löytyy oma Typografia osionsa.
Sivun perusfontti
Internetselaimet näyttävät sivustolla olevan tekstin oletuksena selaimen perusfonttikoon mukaan, joka on oletuksena 16px. Internet-selaaja voi muuttaa myös perusasetuksen selaimen asetuksista mutta tavallisesti selainta käytetään perusfonttikoolla ilman muutoksia. Mikäli sivuston body-elementille ei ole erikseen määritelty fonttikokoa, selain käyttää automaattisesti tätä perusasetusta. Tämä perusfonttikoko toimii lähtökohtana koko sivustolle, ellei yksittäisille elementeille ole erikseen annettu muita fonttikokoja CSS-määrityksillä.
Elementor-editori ei anna mahdollisuutta asettaa perusfonttikokoa sivustolle vaan se on halutessa asetettava erillisellä CSS-määrityksellä omaan CSS-tiedostoon tai mukauta-toiminnon Oma CSS-asetuksessa (body { font-size: 14px; }). Käytettäessä Elementor-editoria fonttikoon perään on asetettava myös !important määre, sillä se ei toimi ilman sitä. Editorin asetukset yliajavat asetuksen. !important -määre pakottaa asetuksen voimaan mikä tarkoittaa, että selaajam perusfontin muutos selaimen asetuksista ei toimi sivustolla
Sivun fonttikoon perusasetusta ei ole välttämättä tarpeen vaihtaa ja voidaan asettaa typografiamääritykset oletusasetuksen (16px) mukaisesti.
Px vai rem?
Fonttikoon määreitä ovat mm. px, em, rem ja %. Pikselikoko (px) on absoluuttinen yksikkö, joka voi käytännössä olla työläs säätää typografisesti kauniiksi ja luettavaksi kaikilla laitteilla. Sivuston perusfontti kannattaa kuitenkin määrittää px-arvona, sillä se toimii perustana, johon muut tekstielementit voidaan suhteuttaa. Käytetyin ja suositelluin määre elementtien fonttikokoon on kuitenkin rem (Root EM), joka on suhteellinen yksikkö.
Arvon 1rem fonttikoko pikseleinä vastaa sivuston perusfonttia, joka on yleensä 16px, jolloin 1,5rem on 1,5 × 16 = 24px. Jos perusfontiksi asetetaan 18px, vastaavat arvot olisivat 18px ja 27px.
Elementor-editorissa asetettaessa typografiaa, kannattaa siis asettaa kaikki typografia-arvot rem-muodossa. Lisäksi fonttikoko on tarkistettava eri näyttökooille ja asetettava tarpeen mukaan.
Typografia Elementorissa
Elementor-editorissa typografiaan liittyviä sivuston laajuisia perusasetuksia sisältävää toimintojen kokonaisuuksia on käytännössä kaksi, Global Fonts ja Typografia. Global Fonts-asetuksia en itse käytä, vaan asetan kaikki arvot käytännössä default-oletusmäärityksiksi. Neljästä asetuksesta Teksti (body) -asetus pitäisi toimia perusasetuksena sivustolle ja siitä voi halutessa muuttaa perusfonttikoon muutoksen. Sen toiminta on kuitenkin epävarmaa, joten jätän sen asettamatta sivustolle.