Linkki - Verkkosivut ja ohjelmointi

Linkki → Verkkosivut ja ohjelmointi → CSS:n perusteet

CSS:n perusteet

Tässä luvussa

opit muotoilemaan verkkosivuja CSS:n avulla.
opit CSS:n syntaksin.
opit hyödyntämään muotoilussa erilaisia yksiköitä.
opit hyödyntämään muotoilussa luokka-attribuuttia.

Laajempia verkkosivustoja luotaessa verkkosivun tyylimääritykset eli muotoilut on järkevää pitää erillään verkkosivun rakenteesta ja sisällöstä. Siksi muotoilut kannattaakin yleensä toteuttaa CSS-tyylitiedostojen avulla.

CSS

CSS-tyylitiedostoja käytettäessä HTML-tiedostoon merkitään pelkästään verkkosivun elementit, sisältö ja tarvittaessa attribuutteja. Kaikki muotoilut merkitään erilliseen CSS-tiedostoon (tiedostopääte .css). HTML-tiedostosta viitataan CSS-tiedostoon eli CSS-tiedostosta haetaan muotoilut verkkosivulle. Erillisen tyylitiedoston hyötynä on HTML-tiedoston pysyminen selkeänä sekä se, että samaa tyylitiedostoa voivat käyttää useat HTML-tiedostot. Tällä tavoin esimerkiksi laajan verkkosivuston muotoilut voidaan merkitä yhteen tiedostoon.

Erilaisia tyylejä

Kokeile täällä, miltä erilaiset tyylitiedostot näyttävät.

Linkittäminen HTML-tiedostoon

CSS-tiedosto linkitetään HTML-tiedostoon sijoittamalla link-elementti HTML-tiedostoon head-elementin sisälle seuraavasti:

<head>
	<link rel="stylesheet" type="text/css" href="tyyli.css" />
</head>

href-attribuutin arvoksi määritellään käytettävän tyylitiedoston nimi, joka on esimerkissä tyyli.css. Linkittämisen jälkeen tyyli.css-tiedoston tyylimääritykset tulevat voimaan ja verkkosivulle saadaan halutunlaiset muotoilut.

Syntaksi

CSS:n syntaksi eli niin sanottu kielioppi on seuraavanlainen:

elementti {
  ominaisuus: arvo;
  ominaisuus: arvo;
}

Kommentointi

Joskus CSS-tiedoston merkintöjä tarvitsee selventää tiedoston lukijalle tai jokin merkintä halutaan piilottaa. Tämä on helpointa tehdä kommentoimalla CSS-tiedostoa. CSS-tiedostoon voidaan merkitä kommentteja näin: /* kommentti */

Elementin muotoilua määritettäessä ensin määritellään, mikä ominaisuus on kyseessä ja kaksoispisteen jälkeen ominaisuudelle asetetaan arvo. Arvon jälkeen merkitään puolipiste (;), joka erottaa eri ominaisuudet toisistaan. Elementin muotoilut sijoitetaan aaltosulkeiden sisälle. CSS-tiedostossa voi määrittää muotoiluja tarvittavan määrän eikä mikään elementti tai muotoilu ole CSS-tiedostossa pakollinen. Jos mitään tyylimäärityksiä ei aseteta, käyttävät verkkoselaimet eri elementeille omia oletusasetuksiaan.

Esimerkki tekstielementin väriominaisuuden määrittämisestä mustaksi:

p {
  color: black;
}

Mikäli useamman elementin samat ominaisuudet halutaan määritellä samoilla arvoilla, elementit voidaan ryhmitellä pilkuilla eroteltuina:

h2, h3 {
  color: red;
  text-decoration: underline;
  text-align: center;
}

Body-elementin muotoilujen määrittelyt tekevät yleiset eli globaalit muotoilut koko verkkosivulle:

body {
  margin: 0;
  padding: 0;
}

Harjoitustehtävä TIM-ohjelmointiympäristössä

Kokeile CSS-muotoilujen tekemistä täällä. Tee tehtävä 1. Ohjeita CSS-määrityksiin löydät alta.

Yleisimmät CSS-muotoilut

Alla olevissa valikoissa on lueteltu yleisimpiä ja hyödyllisimpiä CSS-muotoiluja.

Fontti (font-family)
esim. font-family: Arial;
Fontti voidaan määritellä kirjoittamalla fontin nimi. Useamman sanan sisältävien fonttien nimet tulee kirjoittaa ""-merkkien sisään.

Fontin väri (color)
esim. color: red;
Värit voidaan määritellä joko värin nimellä, heksakoodina (alkaa #-merkillä) tai rgb-muodossa. Lue lisää väreistä.

Fontin asettelu (text-align)
esim. text-align: left;
Tekstin asemointi tapahtuu arvoilla left (vasen reuna), right (oikea reuna), center (keskitetty) tai justify (tasaus molempiin reunoihin).

Fontin koko (font-size)
esim. font-size: 120%; tai font-size: 1.2em;
Huomioi, että 100% tai 1em on normaalikoko.

Leveys (width)
esim. width: 100%;
Leveys voidaan määritellä jollain yksiköllä.

Korkeus (height)
esim. height: 5em;
Korkeus voidaan määritellä jollain yksiköllä. Korkeuden määrittämiseen ei kuitenkaan kannata käyttää prosentteja.

Minimileveys (min-width) ja minimikorkeus (min-height)
esim. min-width: 200px; ja min-height: 5em;
Minimileveys ja minimikorkeus ovat raja-arvoja, joita pienemmäksi elementin leveys tai korkeus ei skaalaudu.

Maksimileveys (max-width) ja maksimikorkeus (max-height)
esim. max-width: 50% ja max-height: 50px;
Maksimileveys ja maksimikorkeus ovat raja-arvoja, joita suuremmaksi elementin leveys tai korkeus ei skaalaudu.

esim. margin: 2em; ja padding: 4em;
Määritykset marginaalille ja täytteelle tehdään samalla tavalla halutulla yksiköllä ja asetetut määrittelyt koskevat automaattisesti jokaista neljää sivua.

Jos halutaan määritellä vain yhden sivun arvo, voidaan käyttää tarkempia ilmauksia:
margin-top / padding-top,
margin-bottom / padding-bottom,
margin-left / padding-left,
margin-right / padding-right

Taulukon reunat (border)
esim. border: 2px solid #400222;
Reunoille voidaan määritellä leveys, tyyli ja väri.

Reunan leveys voidaan määritellä arvoilla medium (keskipaksu), thin (ohut), thick (paksu) tai jollain yksiköllä (esim. pikseleinä).
Reunan tyyli voidaan määritellä arvoilla dotted (pisteinä), dashed (viivoitettu), solid (yhtenäinen) tai double (tuplareunus).
Värit voidaan määritellä joko värin nimellä, heksakoodina (alkaa #-merkillä) tai rgb-muodossa. Lue lisää väreistä.

esim. float: right;
Voidaan käyttää esim. kuva-, div- ja linkkielementtien asemointiin.
Asemointi tapahtuu arvoilla left (vasemmalle) tai right (oikealle).

Harjoitustehtävä TIM-ohjelmointiympäristössä

Harjoittele marginaalin ja täytteen asettamista täällä. Tee tehtävä 2.

Yksiköt

Hyödyllisimmät yksiköt

Absoluuttisia mittayksiköitä:

pikseli (px)

Suhteellisia mittayksiköitä:

kirjasinlajin korkeus (em)
prosentti (%)

CSS-tiedostossa voidaan määritellä esimerkiksi fontin kokoa, marginaalia tai täytettä erilaisilla yksiköillä. Mittayksiköitä on kahdenlaisia: absoluuttisia ja suhteellisia. Absoluuttiset mittayksiköt ovat aina tietyn mittaisia riippumatta siitä, missä niitä käytetään. Suhteelliset mittayksiköt määrittyvät tapauskohtaisesti eli sen mukaan, missä niitä käytetään. Suhteelliset mittayksiköt määrittyvät siis aina suhteessa johonkin muuhun. Suhteellisten mittayksiköiden käyttö on suositeltavampaa.

Fonttikoko määritellään yleensä suhteessa oletusfontin kokoon em-yksikkönä tai prosentteina. Marginaali ja täyte taas määritellään pikseleinä tai suhteessa oletusfontin kokoon em-yksikköinä tai vastaavasti suhteessa selainikkunan kokoon prosentteina. Yksikköjä määriteltäessä luku ja yksikkö kirjoitetaan yhteen ilman välilyöntiä.

Esimerkiksi tekstielementin fontin ja täytteen koko määritellään seuraavasti:

p {
  font-size: 0.8em;
  padding: 10px;
}

Projektitehtävä 1

Omat verkkosivut

Jatka edellisessä luvussa aloittamasi verkkosivun työstämistä alla olevien ohjeiden mukaisesti.

Luo uusi CSS-tiedosto tekstieditoriohjelmalla. Linkitä CSS-tiedosto kaikkiin edellisessä luvussa tekemiisi HTML-tiedostoihin.
Lisää tiedostoon yleiset muotoilut body-elementille (esimerkiksi sivuston taustaväri).
Lisää tiedostoon muotoilut tekstikappaleille (esimerkiksi väri ja fontti).
Lisää tiedostoon muotoilut eri otsikoille (esimerkiksi väri ja fonttikoot).

Luokkien muotoilu

Luokka-attribuutti

Luokka-attribuutista löytyy tietoa edellisestä luvusta. Voit käydä kertaamassa asiaa HTML:n perusteet -luvusta.

CSS:n avulla yksittäistä luokka-attribuuttia ja siihen kuuluvia elementtejä voidaan muotoilla helposti samanlaisiksi ja samalla kertaa. Esimerkiksi tekstielementtiä, joka kuuluu sisalto-nimiseen luokkaan (HTML-tiedostoon merkitty <p class="sisalto"> ), voidaan muotoilla seuraavasti:

.sisalto {
  float: left;
  text-align: center;
  width: 75%;
}

Luokka-attribuutti ilmoitetaan CSS-tiedostossa laittamalla luokan nimen eteen piste. Jos p-elementille määritellyissä muotoiluissa on CSS-tiedostossa päällekkäisyyksiä sisalto-luokalle määriteltyjen muotoilujen kanssa, voimaan jäävät sisalto-luokan muotoilut. Luokalle määritellyt muotoilut siis ylikirjoittavat eli kumoavat elementeille määritellyt muotoilut.

Harjoitustehtävä TIM-ohjelmointiympäristössä

Kokeile luokkien muotoilemista täällä. Tee tehtävä 3.

Validointi

HTML-merkintäkieltä ja CSS-tyylimäärittelyitä kirjoitettaessa syntaksiin voi helposti tulla virheitä. Jos HTML-tiedostossa on syntaksivirheitä, voi verkkosivun sisältö näyttää virheelliseltä. Verkkosivun syntaksin oikeellisuuden eli validisuuden voi tarkistaa helposti internetistä löytyvän validaattorin avulla.

HTML-tiedoston validointi

Mene osoitteeseen http://validator.w3.org/.
Syötä tarkistettavan verkkosivun verkko-osoite kohtaan Address ja napauta Check-painiketta. Voit myös ladata HTML-tiedoston tarkistettavaksi omalta tietokoneeltasi, mikä tapahtuu Validate by File Upload -välilehden kautta tai syöttämällä tarkistettavan tiedoston sisällön suoraan tarkistuskenttään Validate by Direct Input -välilehden kautta.

Syötettyäsi verkko-osoitteen tai ladattuasi tiedoston avautuu verkkosivu, joka kertoo englanniksi, oliko verkkosivullasi virheitä. Validaattori kertoo virheiden lukumäärän, millaisia virheet ovat ja millä rivillä HTML-tiedostossa virheet sijaitsevat. Saadun informaation perusteella pystyt tarvittaessa korjaamaan HTML-tiedostosi validiksi. Tarkista korjausten jälkeen HTML-tiedostosi validaattorilla vielä uudelleen.

Edellä kuvattu validaattori tarkistaa vain verkkosivun HTML-tiedoston sisällön, mutta ei puutu mahdollisiin CSS-tiedoston syntaksivirheisiin. CSS-tiedoston tarkistamiseen on olemassa oma validaattori ja se toimii samaan tapaan kuin HTML-validaattori.

CSS-tiedoston validointi

Mene osoitteeseen http://jigsaw.w3.org/css-validator/.
Syötä tarkistettavan verkkosivun verkko-osoite kohtaan Address ja napauta Check-painiketta. Voit myös ladata CSS-tiedoston tarkistettavaksi omalta tietokoneeltasi, mikä tapahtuu By file upload -välilehden kautta tai syöttämällä tarkistettavan tiedoston sisällön suoraan tarkistuskenttään By direct input -välilehden kautta.

Projektitehtävä 2

Omat verkkosivut

Jatka edellisessä tehtävässä luodun CSS-tiedoston muokkaamista.

Aseta navigointi-luokalle
1. tekstin asettelu vasemmalle.
2. taustaväriksi #FFFAFA.
3. yhden pikselin musta reunaviiva.
Aseta teksti-luokan fonttikoko arvoon 120%.
Aseta kuvat-luokalle maksimileveydeksi 100%. Jos kuvasi ovat suuria, voit lisäksi asettaa img-elementille maksimileveyden, jolla saat esimerkiksi varmistettua kuvien mahtumisen rinnakkain (arvo voi olla esim. 45%).
Aseta alaviite-luokka kellumaan vasemmalle.
Validoi tekemiesi sivujen HTML- ja CSS-koodit.

Yhteenveto

CSS:n avulla voidaan muotoilla verkkosivuja.
Useampi verkkosivu voi käyttää samaa CSS-tiedostoa.
Elementtien muotoilussa kannattaa käyttää suhteellisia yksiköitä.
Jotta verkkosivut toimivat varmasti oikein, tulee CSS-tiedoston ja HTML-tiedoston sisällön oikeellisuus eli validisuus tarkistaa.