MFantti - Tutoriaalit - DIV tutoriaali

DIV-tutoriaali - CSS:n perusteita

CSS on tehokas tapa muotoilla (X)HTML -pohjaista sivua. Miltei vain mielikuvitus on rajana, kun ulkoasuun käytetään taitavasti CSS -koodeja.

CSS omaa mahdollisuuden sijoittaa kaikki ulkoasun muotoilut yhteen tiedostoon. Tällä on useita positiivisia seurauksia.

Latausajat lyhenevät, koska ulkoasu tarvitsee ladata vain yhden kerran koko sivustolla.
Ulkoasun muokkaaminen ja vaihtaminen on helppoa. Muutoksia tarvitsee tehdä vain yhteen tiedostoon.
Voit käyttää erilaisia ulkoasuja näytölle, tulostimelle ja esimerkiksi kännykälle.

Mutta nyt olet saanut riittävästi taustatietoa, jotta voit siirtyä toimintaan.

Avaa uusi tiedosto yksinkertaisella tekstieditorilla (tai vaihtoehtoisesti CSS -editorilla). Tallenna se nimellä tyyli.css. Varmista, että mahdollisessa tiedostotyyppi laatikossa lukee jotain kaikkiin tiedostoihin tai CSS -tiedostoihin viittaavaa, eikä esimerkiksi .txt Tekstitiedosto, kuten Muistio oletuksena tekisi. Vaihda myös merkistökoodaukseksi UTF-8, mikäli kyseinen kenttä on näkyvillä.

Tämän tyylitiedoston muokkaaminen ei ole turhan vaikeaa. Muutama asia CSS -kielestä:

Se on pelkästään muotoiluun. Sillä ei siis voi luoda sisältöä.
Valitsimet ovat lähes aina (X)HTML -tagien nimiä.
Class -valitsimen formaatti on tagin_nimi.class_nimi
Valitsimen jälkeen avataan aaltosulje ({). Aaltosulkeet suljetaan kyseistä elementtiä koskevienmäärittelyjen jälkeen.
Määrittelyt tehdään muodossa muokattava_asia:arvo;. Esimerkiksi color:red;

Täten siis kaikkia kappaleita eli <p>-tagin alueella (ennen </p>) olevaa sisältöä muokataan CSS -tiedostossa valitsimella p{}

Nyt aloitamme tyyli.css tiedoston muokkaamisen lisäämällä siihen yleiset määrittelyt kaikelle body -tagien välissä olevalle.

body{
color:black;
background-color:rgb(238,238,238);
padding:0;
margin:0;
}

Mikäli ymmärrät hieman englantia, tajusit luultavasti, että kyseessä on värien muokkaus. color:black; asettaa mustan oletusväriksi sisällölle, eli lähinnä tekstille. background-color:rgb(238,238,238); taasen asettaa taustavärin RGB -koodin avulla. Kolme arvoa viittaavat punaisen, vihreän ja sinisen määrään asteikolla 0-255. Käyttämäni koodi luo vaaleanharmaan taustan. Margin ja padding nollassa asettavat reunoille jäävän tilan nollaan.

Myös html koodimme tarvitsee pienen lisäyksen, jotta tyylitiedoston ja sen välille muodostuu yhteys:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="tyyli.css" />
<title> Sivun otsikko </title>
</head>

<body>
<div class="otsikko">
</div>
<div class="valikko">
</div>
<div class="sisalto">
</div>
<div class="oikea">
</div>
</body>

</html>

Nyt saattaisi olla oikea hetki tehdä tuttavuutta myös toisen validaattorin kanssa. Saanko esitellä W3C :n CSS -validaattorin?