Tyylien määrittäminen
Tyylimääritykset voidaan liittää
XHTML-dokumenttiin kolmella eri tavalla, mutta tyylien
ominaisuuksien määrittäminen tapahtuu tavasta
riippumatta täsmälleen samalla tavoin. Tyylien
määrittämisen perusidea on muuttaa olemassaolevien
XHTML-elementtien ominaisuuksia. Tyyli on nimetty
XHTML-dokumentissa esiintyvien XHTML-elementtien mukaisesti ja
tyyliin tehtävät muutokset vaikuttavat kyseisen
XHTML-elementin sisällön (esimerkiksi tekstin) ulkoasuun.
Normaalisti XHTML-elementit näytetään selaimen
oletusmääritysten mukaisesti. Antamalla tyyleille
ominaisuuksia voidaan selaimen oletusmääritykset kumota
ja näyttää dokumentti tyylien
määrämällä tavalla. Esimerkiksi tyyliin
h1 tehtävät muutokset vaikuttavat kaikkiin
dokumentin
h1-elementteihin eli dokumentin korkeimman
otsikkotason-elementtiin.
Seuraavassa esimerkissä havainnollistetaan tyylin
ominaisuuksien asettamista kolmelle tyylille.
h1-,
p- ja
strong-tyylillä on olemassa oletusmuotoilut,
joita muutetaan seuraavan esimerkin määrittelyillä.
Elementin ominaisuudet, joita tyylimäärittelyssä ei
muuteta, säilyvät ennallaan. Esimerkissä olevat
h1-tyylin määrittelyt muuttavat
h1-elementin sisällä olevan tekstin
keltaiseksi harmaalla pohjalla sekä tekstin keskitetyksi,
mutta esimerkiksi tekstin kokoa ei muuteta.
p-tyylin määrittelyt muuttavat
p-elementin sisällä olevan tekstin
vihreäksi valkealla pohjalla sekä tekstin tasauksen
molempiin reunoihin.
strong-elementin sisällä oleva teksti
muutetaan ainoastaan lihavoiduksi.
h1 {
color: yellow;
background-color: gray;
text-align: center;
}
p {
color: green;
background-color: white;
text-align: justify;
}
strong {
font-weight: bold;
}
Tyylin määrittely alkaa tyylin nimellä eli sen
XHTML-elementin nimellä, johon tyylimäärittelyt
vaikuttavat. Edellisessä esimerkissä tyylin nimeksi on
annettu
h1,
p ja
strong. Välittömästi tyylin nimen
jälkeen tulee osa, jossa kerrotaan tyylin ominaisuudet. Kaikki
tyylin ominaisuudet kerätään lohkoon kaarisulkeiden
({ ja }) väliin. Tyylin ominaisuuden nimi ja siihen
liittyvä arvo täytyy antaa kaksoispisteellä (
:) toisistaan erotettuna muodossa
ominaisuus: arvo;. Puolipisteellä (;) erotetaan
saman lohkon sisällä olevat ominaisuuksien
määrittelyt toisistaan. Ominaisuuden
määrittelyjä voidaan sijoittaa useampia samalle
riville. Puolipisteen lisääminen on erityisen
tärkeää, jos samassa lohkossa
määritellään useampia ominaisuuksia.
h1-tyylin ominaisuuksien nimet ovat edellisessä
esimerkissä
color, background-color ja
text-align ja ominaisuuksille asetettavat arvot ovat
yellow, gray ja
center.
Seuraavassa kuvassa on käytetty edellisen esimerkin tyylinmäärittelyjä XHTML-dokumentissa.
Seuraavassa esimerkissä on nähtävillä edellisessä esimerkkikuvassa olleen (Kuva 3) XHTML-dokumentin sisältö. Seuraavien lukujen CSS-esimerkeissä tullaan käyttämään pohjana seuraavaa XHTML-dokumenttia, jollei toisin mainita.
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi">
<head>
<link rel="StyleSheet" href="tyyliton.css" type="text/css" />
<title>CSS-esimerkeissä tarvittava
tiedosto</title>
</head>
<body>
<h1>Ensimmäisen tason otsikko</h1>
<p>
Tavallinen tekstikappale, joka kirjoitetaan
<strong>p</strong>-elementin sisään.
Kappaleessa olevat korostukset on toteutettu
<strong>strong</strong>-elementillä.
</p>
<p>
Tavallinen tekstikappale, joka kirjoitetaan
<strong>p</strong>-elementin sisään.
Kappaleessa olevat korostukset on toteutettu
<strong>strong</strong>-elementillä.
</p>
<p>
Tavallinen tekstikappale, joka kirjoitetaan
<strong>p</strong>-elementin sisään.
Kappaleessa olevat korostukset on toteutettu
<strong>strong</strong>-elementillä.
</p>
</body>
</html>
Käytettävissä olevat ominaisuudet on määritelty CSS1- ja CSS2-suosituksissa sekä tulevassa CSS3-suosituksessa. Ominaisuuksiin kelpaavat arvot on myös rajattu näissä suosituksissa. Eri ominaisuuksista kerrotaan tarkemmin myöhemmissä luvuissa.
Käyttäjien kommentit