Tyylit
Jos html - sivuilla on paljon tyylimäärittelyjä, sivujen ylläpitäminen
muodostuu työlääksi varsinkin mikäli sivuja ja määrityksiä on paljon.
Sivujen ylläpitämisen helpottamiseksi on kehitetty erityiset tyylisivut (Cascading
Style Sheets).
Tyylit määritellään ominaisuus: arvo -pareina, joiden erottimena on kaksoispiste. Kaksoispistettä ei tarvita, jos pareja on vain yksi tai on luettelon viimeinen pari.
Tyylimäärittelyjä voidaan tehdä kolmella eri tavalla.
1) Joko suoraan html - koodin joukkoon,
Näissä ns. inline tyyleissä ominaisuus: arvo -parit sijoitetaan lainausmerkkien sisään ja asetetaan style-atribuutin arvoksi.
Esim. <li style="font-size:
10pt; font-weight: bold">
tekee listan tyyppimäärityksen.
2) html-sivulle upotettuna tai
Tyylit määritellään <head>-osassa käyttäen <style>-tagia. Alla olevassa esimerkissä määritellään tyyli peruskappaleelle (p) ja 1-tason otsikolle (h1).
<html>
<head>
< title>otsikko</title>
< style type="text/css">
< !--
p {
font-size: 10pt;
font-family: verdana, arial, sans-serif;
color: #000066
}
h1 {
font-size: 16pt;
font-family: impact, arial, sans-serif;
color: #990000
}
-->
< /style>
< /head>
<body>...
3) html-sivulle linkitettynä.
Mikäli useampi dokumentti käyttää samoja tyylejä, voidaan niistä tehdä erillinen tyylitiedosto ja linkittää tämä kuhunkin dokumenttiin sen <head>-osassa. Tyylitiedoston tyyppi alla olevassa esimerkissä on .css. Se on kuitenkin normaali ASCII-tiedosto, joka sisältää yhteiset tyylimäärittelyt.
<html>
<head>
<link rel=stylesheet href="../styles/stylesheets.css"
type="text/css">
<title>...</title>
</head>
<body>...
Linkitettyjen ja upotettujen tyylien tapauksessa tyylimäärittelyt asetetaan
tietyille elementeille (selector), jotka voivat olla mitä tahansa html-elementtejä.
Tyylejä voidaan määritellä myös yhdistämällä kaksi elementtiä:
p strong { color: #ff0000 }
Tämä tyyli vaikuttaa ainoastaan <p>-tagin sisällä olevaan strong-tagilla korostettuun tekstiin. Jos halutaan vaikuttaa strong-tagin ulkonäköön riippumatta sen sijainnista, määritellään seuraavasti:
strong { color: #ff0000 }
Tyylimäärittelyt on järkevää sijoittaa kommenttitagin sisään, jotta CSS:ää ymmärtämättömät selainohjelmat eivät erehdy luulemaan niitä sisällöksi.
Tyylimuutos voidaan kohdistaa tekstin sisällä (inline) myös mihin tahansa osaan <span>- tai <div>-tagilla, esim.
<div style="margin-left: 0.5in; font-size: 10pt">...</div>
tai
<span style="font-weight: bold; background: #ffff00">
<span style="font-weight: bold; color: #000066; background: #ffff00"> highlighted text
</span>
</span>
Joissakin tapauksissa voi tulla määritelleeksi samalla elementille monenlaiset ominaisuudet erilaisilla tyylien toteutustavoilla (linkitetty/upotettu tyylitiedosto ja inline-tyyli). Tällöin selaimen on päätettävä mitä määritystä noudattaa. Valinta tehdään etuoikeusjärjestyksen perusteella.
Etuoikeusjärjestys on seuraava:
1) inline tyylit
2) upotetut tyylit ja
3) linkitetyt tyylit
Tyylit luokkina
Tyylien ns. perinnöllisyys lisää tyylien joustavuutta. Perinnöllisyys tarkoittaa seuraavaa: jokaiseen tyylielementtiin voidaan lisätä luokkia, jotka perivät emätyylinsä ominaisuudet, mikäli ko. ominaisuutta ei nimenomaan määritellä olemaan jotain muuta, tai mikäli ominaisuus on ei-periytyvä. Esimerkiksi
p {
font-family: "trebuchet ms", "comic sans ms", arial, sans-serif, helvitica;
font-weight: bold;
font-size: 11pt;
color: #000066;
margin-left: 1cm;
}
p.small {
font-family: arial, sans-serif;
font-size: 8pt;
text-align: center;
}
Haluttaessa ihan tavallinen kappale käytetään <p>-tagia, ja haluttaessa pienellä kirjoitettu, keskitetty kappale käytetään määritystä <p class=small>.
Myös yleisiä luokkia, jotka voidaan liittää mihin tahansa elementtiin, voidaan määritellä
.note {
font-size: 10pt;
color: #006600;
background: #ffffff;
position: relative;
padding: 2pt;
border-width: thin;
border-style: ridge;
}
Linkit erikoistapauksena
<a>-tagille (eli linkkisanoille) voidaan tyyleillä määritellä seuraavat luokat:
a:link { color: #ffff00 } - linkin väri
a:visited { color: #990099 } - käytetyn linkin väri
a:active { color: #ff0000 } - viimeksi käytetyn linkin väri
a:hover { color: #00ff00 } - tuottaa ns. hotspot-efektin eli vaihtaa linkkitekstin väriä, kun kohdistin tulee sen päälle.