CSS on lyhenne sanoista
Cascading Style Sheet, ja sen avulla voidaan määrittää miltei koko sivujen ulkoasu. Tällä sivulla opit ymmärtämään ja luomaan CSS-tiedostoa.
ULKOINEN CSS
Ulkoinen CSS on erittäin kätevä, sillä sillä saa nopeasti muutettua koko sivua, eikä esimerkiksi tablessa tarvitse muokata tyylitiedostoa joka sivulta.
Avaa uusi, tyhjä muistio, ja tee sinne täysin samat asiat kuin mitä alla on, mutta jätä ensimmäinen kuva välistä. Eli
aloita kohdasta kaksi.
Kun ulkoinen CSS on valmis, tallenna se nimellä tyyli.css. Pistä sitten ulkoasun koodeihin <head></head> -tagien väliin seuraavanlainen koodi:
<link rel="stylesheet" href="tyyli.css"
type="text/css">
Tyylimääritys
Avaa muistio, jossa on valmiina ulkoasusi koodit. Etsi merkintä <title></title> , ja pistä sen alle seuraavasti:
<style type="text/css">
<!--
-->
</style>
Kun olet tehnyt tämän, määrität sivujen rakenteen, eli bodyn. Jatka koodia alla olevan kuvan mukaisesti.
<style type="text/css">
<!--
body{
}
-->
</style>
Etsi bodyn jälkeen tulevat { } -koodit. Pistä niiden väliin tällaiset tekstit:
<style type="text/css">
<!--
body{
background-color: #;
background-image:url(' ');
background-repeat: ;
font-family: ;
color: #;
font-size: px;
cursor: ;
text-align: ;
}
-->
</style>
Lisää nyt äsken pistämiesi tekstien jälkeen määritykset,
joiden tarkoitukset näet alla (
lisää esimerkkejä).
background-color: #TAUSTAVÄRI;
esim. background-color: #FFFFFF; (valkoinen)
background-image:url('TAUSTAKUVAN OSOITE');
esim. background-image:url('http://.fi/tausta.jpg');
background-repeat: TAUSTAN TOISTUMINEN;
esim. background-repeat: no-repeat;
(kuva ei toistu)
font-family: TEKSTIN FONTTI ;
esim. font-family: Verdana;
color: #TEKSTIN VÄRI;
esim. color: #000000; (musta)
font-size: TEKSTIN KOKOpx;
esim. font-size: 11px;
cursor: KURSORI;
esim. cursor: default; (tavallinen nuoli)
text-align: TEKSTIN PAIKKA;
esim. text-align: justify; (tasoittaa tekstit)
Mikäli sinulla on ulkoasussasi tablen koodi, tee toinen täysin samanlainen koodi mitä olet jo tehnyt (mutta ilman ensimmäisen kuvan koodeja) ja lisää
se edellisen alle. Pyyhi sitten body -teksti koodin alusta ja kirjoita tilalle "table". Nyt voit muokata tablen tyyliä erikseen. Koodiesi pitäisi näyttää tältä:
<style type="text/css">
<!--
body{
background-color: #;
background-image:url(' ');
background-repeat: ;
font-family: ;
color: #;
font-size: px;
cursor: ;
text-align: ;
}
table{
background-color: #;
font-family: ;
color: #;
font-size: px;
cursor: ;
text-align: ;
}
-->
</style>
Jatka sitten koodia linkkimäärityksillä alla olevan kuvan mukaisesti.
<style type="text/css">
<!--
body{
background-color: #;
background-image:url(' ');
background-repeat: ;
font-family: ;
color: #;
font-size: px;
cursor: ;
text-align: ;
}
table{
background-color: #;
font-family: ;
color: #;
font-size: px;
cursor: ;
text-align: ;
}
A:link{
color: #;
text-decoration: ;
cursor: ;
}
A:visited{
color: #;
text-decoration: ;
cursor: ;
}
A:active{
color: #;
text-decoration: ;
cursor: ;
}
A:hover{
color: #;
text-decoration: ;
cursor: ;
}
-->
</style>
Lisää nyt äsken pistämiesi tekstien jälkeen määritykset, joiden tarkoitukset näet alla (
lisää esimerkkejä).
A:link{
color: #;
esim. color: #000000; (musta)
text-decoration: ;
esim. text-decoration: underline; (alleviivaus)
cursor: ;
esim. cursor: default; (tavallinen nuoli)
}
A:visited{
color: #;
esim. color: #000000; (musta)
text-decoration: ;
esim. text-decoration: underline; (alleviivaus)
cursor: ;
esim. cursor: default; (tavallinen nuoli)
}
A:active{
color: #;
esim. color: #000000; (musta)
text-decoration: ;
esim. text-decoration: underline; (alleviivaus)
cursor: ;
esim. cursor: default; (tavallinen nuoli)
}
A:hover{
color: #;
esim. color: #7E0000; (tummanpunainen)
text-decoration: ;
esim. text-decoration: underline overline;
(yli- ja alleviivaus)
cursor: ;
esim. cursor: crosshair; (risti)
}
