CSS-tiedosto

CSS-tiedosto on tyylitiedosto, jolla muokataan oman HTML WWW-sivun ulkonäköä.

CSS-tiedoston käyttöönotto HTML-koodissa:

CSS-tiedosto on tekstitiedosto tiedostotunnuksella css ja se otetaan HTML-koodissa käyttöön lisäämällä <head> tagien sisälle yksi rivi koodia, josta on esimerkki alla rivillä 5:

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Karin testi</title>
5 <link href="karintyylit.css" rel="StyleSheet" type="text/css" media="all" />

6 </head>
7 <body>
8 </body>
9 </html> 

CSS-tiedoston sisältö:

CSS-tiedostossa ensimmäisenä määritellään "body", jossa määritellään esimerkiksi normaalin tekstin fontin tyyli ja koko sekä taustaväri. Alla esimerkki:

body
{
 font-family: Arial;
 font-size: 12pt;
 text-align: left;

 background-color: rgb(191, 236, 249);
}

Ylhäällä taustavärin määrittelee kohta rgb(...), jonka kolme lukua on RGB-värikoodi. Esimerkiksi RGB(191, 236, 249) on vaaleansininen. Värien RGB-kooodit löydät verkkosivulta Colors RGB (w3schools.com).

CSS-tiedostolla voi myös määritellä HTML-koodissa olevien alueiden ja nappien sijainnin, koon, värin, ääriviiivan, tekstin ulkoasun, jne. Alla olevilla CSS-tiedostossa voi määritellä esimerkiksi HTML-koodin aikatekstialueen ja painonapin sijainnin sekä muita ominaisuuksia.

#aikaTXT
{
 position: absolute;
 background-color: white;
 left: 5px;
 top: 600px;
 width: 300px;
 height: 100px;
 border: 1px solid black;
}

#aikaNappi
{
 position: absolute;
 left: 5px;
 top: 710px;
}

CSS-tiedostolla voi muokata useita muitakin ulkonäköasioita ja niistä lisää WWW-sivulla CSS Tutorial (w3schools.com).