CSS
CSS (Cascading Style Sheets, porrastetut tyyliarkit) on erityisesti nettisivudokumenteille kehitetty tyyliohjeiden laji. CSS:ssä dokumentille voi määritellä useita tyyliohjeita, jotka yhdistetään tietyllä tavalla yhdeksi säännöstöksi. CSS:lla voi määritellä sivun elementeille esimerkiksi värejä, taustavärejä, taustakuvia, korkeutta, leveyttä ja marginaalia. CSS:ää käytetään luonnollisesti (X)HTML:n kanssa, mutta se sopii yhtä lailla muidenkin rakenteisten dokumenttien (esimerkiksi XML, MathML) tyyliohjeeksi.
CSS:n perussyntaksi
CSS:n perussyntaksi muodostuu valitsimesta, ominaisuudesta ja arvosta. <source lang="css"> Valitsin { Ominaisuus: Arvo; } </source> Kaikki ominaisuudet ja arvot tulevat aaltosulkujen {} sisään. Useita ominaisuuksia ja arvoja voi laittaa valitsimeen peräkkäin erottelemalla ne puolipisteellä ;
Esimerkki CSS-määrittelystä
/* Leipätekstin fontin määritys ja tasaus */
p {
font: 11px 'Trebuchet MS', Verdana, Arial, Sans-serif;
color: #9e9e9e;
text-align: justify;
}
/* Linkit lihavoidaan, mutta ei alleviivata */
a {
text-decoration: none;
font-weight: bold;
}
/* Kursorin alla olevan linkin tausta mustaksi ja teksti valkoiseksi
24-bittisellä heksakoodilla määritettyinä */
a:hover {
color: #ffffff;
background-color: #000000;
}
CSS:n lisääminen sivulle
CSS tieto lisätään nettisivuille joko suoraan html koodin sekaan tai ulkoisena tiedostona. Suoraan html tiedostoon lisättäessä kirjoitetaan seuraava koodipätkä sivun <head> </head> tagien väliin ja lisätään css määrittelyt oikealle paikalleen.
<style type="text/css"> <!-- CSS KOODI TÄHÄN --> </style>
Ulkoista tiedostoa käytettäessä CSS koodi tallennetaan omaan tiedostoonsa, esimerkiksi tyylitiedosto.css, jonka jälkeen <head> </head> tagien väliin vain seuraava koodinpätkä:
<link rel="stylesheet" href="tyylitiedosto.css" type="text/css" />
Ulkoinen CSS tiedosto on kätevä, jos samaa tyyliä käytetään useammalla sivulla. Mikäli tahdot esimerkiksi vaihtaa tallisi sivujen taustakuvan, ulkoista css:ää muokkaamalla voit vaihtaa sen samantien joka sivulle. Jos käyttäisit CSS:ää joka on kirjoitettu suoraan HTML dokumenttiin, joutuisit korjaamaan uuden taustakuvan osoitteen jokaiselle sivulle erikseen.
Opi lisää
Menthal 27 (Ohjeita HTML:n, XHTML:n ja CSS:n käyttöön)