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).
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).