CSS:n käyttäminen
CSS:n avulla voidaan muotoilla HTML -koodin komennot (tagin) vaikutusalue halutuksi. Silloin koodi on muotoa:
h1 {
font-family: Verdana, Geneva, sans-serif;
font-size: 20px;
}
Yllä on pääotsikko (<h1>) muotoiltu fontin ja fontin koon osalta. Eli ensin kirjoitetaan haluttu html -komento, sen jälkeen aaltosulku auki, sitten css komennot siten, että jokainen komento loppuu puolipisteeseen. Lopuksi aaltosulku kiinni. Jos ko. määritys on sivun head -osassa muotoillaan kaikki sivun h1 -tasoiset otsikot.
Toinen vaihtoehto on antaa tyylille haluttu nimi. Alla on perustettu uusi korostettu -niminen tyyli, joka lihavoi fontin ja muuttaa tekstin värin punaiseksi. Halutun nimen eteen kirjoitetaan piste (.), sitten tyylin nimi, jonka jälkeen aaltosulku - varsinaiset tyylimääritykset jne.
.korostettu {
font-weight: bold;
color: #F00;
}
Kyseinen tyyli otetaan HTML -puolella käyttöön haluttuun kohtaan ns. class -määrityksellä:
<p class="korostettu">Tässä korostettua tekstiä </p>
tai sitten vain osaan kappaletta (p) span -komennoilla. Span -komento on ns. rivielemetti samoin kuin esim. strong, mutta sen merkitystä ei ole etukäteen määritetty. Vähän vastaava on div, joka on ns. lohkoelementti (rivittää tekstin). Div -komennosta lisää myöhemmin.
<p> Tässä teksiä jossa <span class="korostettu">tärkeä </span> sana. </p>
Span komennon avulla voidaan siis muotoilla esim. tekstikappaleen sisällä oleva alue halutulla tyylimäärityksellä ilman että komennon lopetus suorittaa rivinvaihdon.
Div -komennolla voidaan määrittää ns. lohkoelemettejä. Niitä voidaan käyttää esim. sivun eri osien asemoinnin avuksi. Yleensä div -komento on muotoa <div id="nimi"> Tähän lohkon sisältö </div>. Id ja class määritteen ero on siinä että id on aina uniikki, eli se saa esiintyä sivulla vain kerran. Alla jaetaan sivu pystysuunnassa kahteen osioon käyttäen div komentoa:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Div esimerkki</title>
<style type="text/css">
#vasen{
background-color: #FF0;
width: 50%;
float: left;
min-height: 300px;
}
#oikea{
background-color: #CCC;
width: 50%;
float: left;
min-height: 400px;
}
</style>
</head>
<body>
<div id="vasen">
<h1>Vasen puoli</h1>
</div>
<div id="oikea">
<h1>Oikea puoli</h1>
</div>
</body>
</html>
CSS -tyylimääritys on tehty tässä sivun head -osaan. Sinne on perustettu kaksi tyyliä vasen ja oikea. Uniikin tyylin ollessa kyseessä aloitetaan risuaita-merkillä (#), sitten tyylin nimi ja aaltosulku. Vasemmalle tyylille on määritetty keltainen taustaväri, 50 % leveys (puolet), kelluvaksi vasempaan reunaan ja minimikorkeudeksi 300 px. Jos vasempaan osaan tulee enemmän kuin 300 pikseliin mahtuu, saa lohko kasvaa alaspäin (min-height). Oikea on muuten sama, mutta taustaväri on harmaa (erottuu paremmin) ja minimikorkeus on 400 px.
Varsinainen tyylimääritys kannattaa aina tehdä joko erilliseen tiedostoon (esim. tyyli.css) tai sivun head osaan, mutta se voidaan tehdä myös suoraan komennon yhteyteen. Näin voidaan helposti ohittaa esim. yhdessä kappaleessa yhteinen tyyliasetus. Se tapahtuu seuraavasti:
<p> Tämä kappale on yleisen tyylimäärityksen mukaista tekstiä</p>
<p style="color:red;"> Tämä kappale tulee muuten kuten ylempikin, mutta se muutetaan punaiseksi </p>
Tyylimääritys voidaan kirjoittaa myös seuraavasti:
#sisalto p {
font-size: 14px;
}
Silloin se tarkoittaa että kappaleteksti (p) on sisalto -nimisellä alueella (alue määritetty div -tagilla) fonttikooltaan 14 pikseliä, mutta voi olla esim. navi -nimisellä alueella jotain muuta. Asemoinnista CSS:n avulla myöhemmin.
Myös useita komentoja voidaan määritellä kerralla. Esim.
h1, h2, p {
color: #0FF;
}
Yllä oleva komento muuttaisi h1, h2 ja p tagien värin. Kattavan listan CSS ominaisuuksista löydät esim. tästä.
