4. Oppitunti - tyylisivut
Css, eli cascading style sheets, on webbisivulle sama mitä mauste ruualle. Pelkkä sisältökin riittää, mutta olisi mukavaa, jos sivut näyttäsivätkin hyviltä. Tägien avulla sivun ulkoasun muokkaaminen on melko hankalaa: ne on tarkoitettu lähinnä sivun rakenteen määrittelyyn. Sen sijaan kannattaa käyttää css:ää. Sen avulla voidaan määritellä jokaiselle elementille oma ulkoasu.
1. Avaa toinen Notepad
Tallennamme css-tyylit erilliseen tiedostoon. Tästä on se etu, että voimme käyttää samaa tyyliä useilla eri sivuilla.
2. Kopioi seuraava koodi Notepadiin
body {
background-color:#93B5E6;
margin-left:20%;
margin-right:20%;
}
p {
font-size: 0.8em;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
color:#564b47;
}
img {
margin:25px;
}
#pikkukuva {
float:left;
}
Kuten huomaat, css-koodissa on mainittu kolme eri tägiä: body, p ja img. Sen jälkeen kaarisuluissa olevat ominaisuudet vaikuttavat kyseiseen tägiin.
3. Tallenna sivu esim. nimellä tyyli.css
Huom, pääte .css on tärkeä!
4. Avaa omasivu.html, mikäli se ei ole auki toisessa Notepädissä, kopioi seuraava koodi head-lohkoon. (Muistathan head-lohkon ensimmäisestä oppitunnista? ) Tämä linkittää luomasi tyylisivun tekemääsi kotisivuun.
<link type="text/css" href="tyyli.css" rel="stylesheet" media="screen" />
5. Tallenna ja esikatsele
Näyttää heti paljon paremmalta vai mitä? Taustaväri on miellyttävän sininen, marginaalit oikeassa ja vasemmassa reunassa tekevät tekstistä helpomman lukea, kappaletekstin fontti on vaihtunut ja kuvien ympärillä on hieman marginaalia.
Jos haluan viitata johonkin yksittäiseen elementtiin sivulla, voin käyttää id- valitsinta. Esimerkiksi haluan tehdä jotain ensimmäiselle pikkukuvalle, mutta en toiselle maisemakuvalle. Lisään siis img-tägiin id:n "pikkukuva":
<img id="pikkukuva" src="omakuva.jpg" />
Tämän jälkeen voin viitata css-tiedostossa pikkukuvaan seuraavalla tavalla:
#pikkukuva {
float:left;
}
Oheinen esimerkki laittaa tekstin kiertämään kuvan oikealta puolelta.
Seuraavissa kappaleissa keskitytään ulkoasun muokkaukseen, eli varsinaiseen designiin. Mikäli kotisivusi sisältö on kunnossa ja järkevästi jäsennettynä, ei itse sivuun tarvitse tehdä muutoksia (paitsi tietenkin kun itse sisältö päivittyy). Tämän jälkeen kaikki muokkaukset tehdään tyyli1.css-tiedostoon. Tästä on huomattavia etuja: kun sisältö, tägit ja ulkoasumääritteet eivät mene sekaisin on ulkoasun muokkaus huomattavasti nopeampaa, etkä vahingossa poista mitään tärkeää.
« Edellinen: Kuvien lisääminen - Seuraava: Otsikoiden muotoilu »