Tyylitiedostojen käyttö – CSS

Tyyli- eli CSS (Cascading Style Sheet) -tiedostoja käytetään verkkojulkaisemisessa sivujen ulkoasun määrittämisessä. Tyylitiedostojen käytön idea piilee yksinkertaisuudessa: kun ulkoasu määritetään vain yhdessä paikassa, satojen tai tuhansien sivujen ulkoasun muokkaus onnistuu yhtä ainoaa tyylitiedostoa muokkaamalla.

Tyylitiedoston linkitys verkkosivulle

Jotta voit hyödyntää tyylitiedostoa verkkosivullasi, sinun tulee luoda linkki kunkin verkkosivun head-elementistä käsin tyylitiedostoon. Alla oleva kuva havainnollistaa linkitystä:

Tyylitiedoston nimi: raimotyyli.css
| | |
Linkki tyylitiedostoon sivuilta: index.html yhteystiedot.html harrastukset.html

Linkitys CSS-tyylitiedostoon onnistuu, kun lisäät kunkin sivun head-elementtiin seuraavassa esimerkissä esitetyn link-elementin (ks. lihavoitu kohta):

<head> <meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1”>
<title>Portfolio</title>
<link href=“raimotyyli.css” rel=“stylesheet” type=“text/css”>
</head>

Yllä kuvatussa esimerkissä tehtiin tyyliviittaus verkkosivulta raimotyyli.css-nimiseen tyylitiedostoon. Tyylitiedoston nimen voit toki valita itse: nimi voi olla esimerkiksi photogallery.css tms. Kun olet luonut toimivan tyylitiedostoviittauksen yhdelle sivullesi, sinun tulee siis kopioida viittauskoodi myös muille sivuille. Tämän jälkeen voitkin keskittyä yhden ja saman tyylitiedoston muokkaamiseen haluamasi ulkoasun määrittämistä varten.

Tyylitiedoston muokkaaminen

Kun selainohjelma lataa verkkosivun, selain samalla tarkistaa sivuun linkitetystä css-tyylitiedostosta, onko jotakin sivulla käytettyä elementtiä määritetty uudelleen CSS-tyylitiedostossa. Voit siis “määrätä” esimerkiksi tietyn otsikon (h1 tms) käyttämään tiettyä kirjasinlajia, linkin näyttämään tietyn kokoiselta tai tehdä muita määritteitä sivun ulkoasuun.

Alla oleva esimerkki on erään hyvin yksinkertaisen CSS-tyylitiedoston sisältö: tiedostossa on määritetty se, miltä h1- ja h2-otsikoiden tulee näyttää.

h1 {
    font-size: 18px;
    font-weight : normal;
    font-family: arial, georgia, serif;
    color : #666;
    margin: 0px;
    }
h2 {
    font-size: 14px;
    font-weight : bold;
    font-family: arial, georgia, serif;
    color : #666;
    margin-top: 4px;
    margin-bottom: 1px;
    }

Kuten ehkä huomasit, kukin tyylitiedostossa määritetty elementti määritellään { } -aaltosulkumerkkien sisällä. Huomaa lisäksi, että kukin määrittelyrivi loppuu puolipisteeseen ;

Class-viittaukset tyylitiedostoon sisältöön

Käyttäessäsi tavanomaisia elementtejä, kuten esimerkiksi h1-otsikkoa tai kappale-elementtiä p, sinun ei tarvitse viitata tyylitiedostoon erikseen sivusi eri kohdista. Riittää siis, että olet luonut yhden linkin tyylitiedostoon sivusi head-elementissä. Jos kuitenkin haluat käyttää erilaisia tyylejä esimerkiksi vekrkosivusi eri osissa, voit tehdä erityisviittauksia tyylitiedostoon aiemmin oppimasi class-attribuutin avulla. Tällöin sinun tulee tehdä myös lisämäärityksiä tyylitiedostoon. Alla oleva esimerkki ilmaisee, kuinka voit tehdä sivulta class-viittauksen tyylitiedostossa määritettyyn “ingressi”-nimiseen tyyliin:

<div class="ingressi">
<p>
Raimo Keski-Vääntö, joka on kunnostautunut mm.
pääsemällä Rautakokki-ohjelmaan, kertoo
elämäntarinastaan Irene Torsionille.
</p>
</div>

Alla on puolestaan näkymä siitä, miten voit määrittää yllä mainitun class=”ingressi”-tyylin itse css-tyylitiedostossa:

.ingressi {
	  font-family: arial, georgia, serif;
	  font-size: 20px;
	  font-style: normal;
	  font-weight: bold;
	  color: #333333;
          }

Huomaa, että tarpeen tullen voit toki luoda useita eri tyylitiedostoja ja käyttää niitä erilaisissa verkkosivuistoissa.