Seuraavassa tarkastellaan CSS-tyylilomakkeiden käyttöä ja niiden perusominaisuuksia Cascading Style Sheets, level 1 (CSS1)-suosituksen mukaisesti
Tyylit liitetään xhtml-dokumenttiin link-elementillä seuraavaan tapaan:
<link href="tyylit.css" rel="stylesheet" type="text/css" title="Tyylin nimi" />Samaan dokumenttiin voi liittää myös useita vaihtoehtoisia tyylejä:
<link href="tyylit.css" rel="Alternate stylesheet" type="text/css" title="Tyylin nimi" />Perusperiaate on muuttaa olemassaolevien HTML-elementtien ominaisuuksia. Oletuksena tyylin nimi on siis sama kuin sen HTML-elementin nimi, jonka ulkoasuominaisuuksia halutaan muokata. Jokaisella muutettavalla ominaisuudella on tietty nimi.
tyylinimi {
ominaisuus: arvo;
}Esim. määritellään body-elementin tekstin väriksi musta ja taustaväriksi valkoinen:
body {
color: black;
background-color: white;
}Tyylien avulla voidaan määritellä asiayhteyden mukaan käyttäytyviä tyylejä. Eräs tällainen esimerkki on p-elementin sisällä oleva strong-elementti.
p-elementin sisällä oleva strong-elementti muotoillaan seuraavan säännön mukaisesti:
p strong {
background-color: white;
color: red;
}
Esimerkki asiayhteyden mukaan määräytyvästä tyylistä.
class-attribuutin avulla voidaan xhtml-elementti määrätä käyttämään
tiettyä tyyliä. Esim.
<p>Normaalitekstiä kappaleellinen</p>
<p class="varoitus">varoitus </p>Vastaavat tyylimääritykset
p {
background-color: white;
color: green;
text-align: center;
}
p.varoitus {
background-color: white;
color: red;
}Edellisen aliluokan yleistys, jota voidaan käyttää kaikkien elementtien yhteydessä.
.varoitus {
background-color: white;
color: red;
}Esimerkki tyylin aliluokan käytöstä .
Näennäisluokat ovat tyylien erikoistapauksia, jolla saadaan esimerkiksi linkille tapauskohtainen käyttäytyminen sen mukaan onko linkki vierailtu vai ei.
a:link { /* vierailematon linkki */
color: blue;
background-color: transparent;
}
a:visited { /* vierailtu linkki */
color: purple;
background-color: transparent;
}
a:active { /* aktiivinen linkki */
color: red;
background-color: transparent;
}
a:hover { /* kohdistettu linkki */
color: blue;
background-color: gray;
}Esimerkki näennäisluokkien käytöstä.
Pituudet ja korkeudet kannattaa aina ilmaista suhteellisesti prosentteina tai em-yksikköinä.
em suhteutetaan aina oletusfontin kokoon. px (pikseli) yksikköä
voi käyttää reunusten ja marginaalien määrittelyssä mutta ei kirjasin koon määrittämiseen.
p {
font-size: 120%;
}
h1 {
margin-top: 1em;
}
h2 {
border: 1px solid black;
}Kommentointi onnistuu c-kielestä tutulla tavalla:
strong { /* Korostamiseen käytettävä tyyli */
background-color: white;
color: red;
}Värien määrittämisessä on käytössä useita tapoja. Helpoin tapa on käyttää prosentteja:
p {
background-color: rgb(100%, 100%, 100%) /* valkoinen */
}Linkkejä värien määrittämisestä:
CSS:n hienompiin ominaisuuksiin tutustutaan myöhemmin CSS2-luennolla.
Eric Meyerin CSS/edge-sivusto sisältää useita hienoja esimerkkejä CSS:n mahdollisuuksista.
Pahimpia syntaksi- ja kirjoitusvirheitä voi välttää validoimalla CSS-tiedostonsa W3C:n CSS validatorilla
Tarkemmin CSS:n eri ominaisuuksia voi lukea Tietoverkot työvälineenä -kurssin monisteesta ja luentosivuilta.