CSS (Cascading Style Sheets) on kieli, jolla määritellään verkkodokumenttien ulkoasua. CSS-määritykset ovat www-selaimelle annettuja ohjeita dokumentin eri elementtien ulkoasun esittämiseen. CSS mahdollistaa dokumentin rakenteen ja ulkoasun määritysten erottamisen toisistaan. Ulkoasumääritykset voidaan tehdä erilliseen CSS-tiedostoon, johon voidaan viitata kaikilta verkkosivuston yksittäisiltä sivuilta.
Tunnilla: Käydään läpi kolme erilaista tapaa, joilla CSS-määrityksiä voi liittää HTML-dokumenttiin, ja missä tilanteessa mitäkin tapaa kannattaa käyttää.
Viittaaminen ulkopuoliseen CSS-tiedostoon
Koska sivustolla on vähintään kolme sivua ja tarkoituksena on tehdä niille yhtenäinen ulkoasu, kannattaa luoda yksi erillinen CSS-tiedosto, jonka avulla samat ulkoasumääritykset liitetään. Selkeä nimi tiedostolle on esimerkiksi style.css. Viittaus luotuun CSS-tiedostoon liitetään jokaisen HTML-sivun HEAD-elementtiin, minkä jälkeen www-selain löytää sivulle tarkoitetut ulkoasumääritykset:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sivun otsikko</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
---Näin toimien on mahdollista yhtä CSS-tiedostoa muokkaamalla vaikuttaa kaikkien sivuston sivujen ulkoasuun. Esimerkiksi ensimmäisen tason otsikon eli <h1>-elementin ulkoasulle voisi antaa seuraavat ulkoasumääritykset:
h1 {
color: #666666;
background-color: #eeeeee;
font-size: 1.5em;
border-bottom: 4px solid #999999;
font-family: helvetica, sans-serif;
padding: 0.5em; }Määritys vaikuttaa nyt kaikkien niiden sivujen <h1>-elementteihin, joihin kyseinen CSS-tiedosto on liitetty.
Tunnilla: Käydään läpi edellä mainitut määritykset ja niiden vaikutukset. Lisätään erilaisia määrityksiä myös muille elementeille. Kirjasimen määrityksiin liittyen pohditaan muun muassa kiinteän ja suhteellisen fonttikoon eroa sekä erilaisten fonttien tarkoituksenmukaista käyttöä.
Määritysten kohdistaminen class-valitsimella
Class- eli luokkavalitsimella on mahdollista kohdistaa CSS-määrityksiä eri elementeille. Esim. seuraavassa tekstikappaleessa on kohtia, jotka halutaan korostaa <strong>-elementin avulla, mutta toista kohtaa halutaa korostaa vielä erityisen painokkaasti:
<p>Tämä on tekstikappale, jossa on <strong>tärkeää</strong>
mutta myös <strong>erittäin tärkeää</strong> asiaa.<p/>Oletusarvoisesti molemmat <strong>-elementit ovat samanarvoisia, ja selain korostaa ne samalla tavalla, mutta class-valitsimella elementit voidaan luokitella ja erottaa ne toisistaan:
<p>Tämä on tekstikappale, jossa on <strong>tärkeää</strong>
mutta myös <strong class="huom">erittäin tärkeää</strong>
asiaa.<p/>Kun toiselle elementille (tai useille elementeille) on määritelty oma luokka, voidaan siihen kohdistaa CSS:ssä omia ulkoasumäärityksiä, esim:
strong.huom {
color: #ff0000;
background: transparent;
}Tai pelkästään:
.huom {
color: #ff0000;
background: transparent;
}Tässä esimerkissä <strong class="huom">-elementin halutaan tulostuvan www-selaimessa punaisella värillä. Jälkimmäinen CSS-määritys vaikuttaisi myös esim. HTML-elementtiin <p class="huom">, koska siinä .huom -luokkaa ei ole liitetty mihinkään yksittäiseen elementtiin. Ensimmäisen esimerkin strong.huom vaikuttaa ainoastaan <strong class="huom"> -elementteihin.
Tunnilla: Perehdytään tarkemmin class-valitsimen käyttöön.
div-elementti – itse määriteltävä lohkoelementti
Edellä tehdyt määrittelyt on kohdennettu HTML-elementteihin, jotka on valittu käyttöön niiden sisällön merkityksen mukaan, esimerkiksi <p>-elementti tekstikappaleelle.
<div>-elementti on joustava lohkoelementti, jonka sisällön merkitystä määritelty. Sitä käytetään runsaasti sivujen asettelun apuna, esimerkiksi silloin kun sivu halutaan jakaa palstoihin. Esierkkisivustolla voidaan sivun varsinainen sisältö sulkea oman <div>-elemntin sisään seuraavasti:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sivun otsikko</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<div class="content">
<h1>Ensimmäisen tason otsikko</h1>
<ul class="navigaatio">
<li>etusivu</li>
<li><a href="portfolio.html">portfolio</a></li>
<li><a href="cv.html">CV</a></li>
</ul>
<p>Tekstikappale</p>
</div>
</body>
</html>Nyt käytössä on luokkamäärityksellä content yksilöity elementti, joka sisältää sivun kaiken varsinaisen sisällön. CSS:n avulla on mahdollista esimerkiksi korostaa tätä elementtiä nostamalla se irti koko sivun taustasta taustavärin ja reunuksen avulla:
body {
color: #000000;
background-color: #eeeeee;
}
#content {
border: 2px solid #999999;
color: #333333;
background-color: #ffffff;
padding: 0.5em;
max-width: 40em
margin: 2em auto;
}Yllä mainitussa esimerkissä koko sivun eli <body>-elementin taustaväriksi on määritelty hyvin vaalea harmaa. Sisältö nostetaan esiin taustasta asettamalla content-luokkamäärityksellä yksilöidyn <div>-elementin taustaväri valkoiseksi, määrittelemällä sille tummempi harmaa reunaviiva sekä määrittelemällä sille maksimileveys ja automaatinnen marginaali.
Tunnilla: Elementtien leveyksiin liittyen kiinteäleveyksisten ja skaalautuvien sivujen eroja ja niihin liittyvää problematiikkaa.
Linkkien ulkoasun määritteleminen
CSS mahdollistaa linkkien ulkoasun muuttamisen. Ulkoasasuehdotukset voi antaa esimerkiksi tuoreelle, vierailemattomalle linkille, vieraillulle linkille ja linkille, jonka päällä hiiren osoitin on:
a:link {
color: #000099;
background: transparent;
}
a:visited {
color: #660099
background: transparent;
}
a:hover {
color: #993333;
background-color: #ffff33;
text-decoration: none;
}Nyt linkkien ulkoasu vastaa muilta osin yleisesti käytössä olevia oletusarvoja (linkki on sininen, vierailtu linkki violetti), mutta kun hiiren osoitin viedään linkin päälle, linkki muuttuu punaiseksi, sen alleviivaus häviää ja taustaväri muuttuu.
Tunnilla: Perehdytään tarkemmin linkkien ulkoasun määrittelyyn etenkin käytettävyyden näkökulmasta. Mitä tulisi ottaa huomioon, että linkit erottuvat ja toimivat loogisesti.
CSS-määritysten kohdistaminen elementin jälkeläiselle
Viimeinen esimerkki havainnollistaa CSS-määritysten kohdentamisen elementille silloin, kun se sijaitsee jonkin valitun elementin sisällä. Voisi esimerkiksi olla hyödyllistä erottaa navigaatio-osion linkit sivujen muista linkeistä. Navigaatiossa ei esimerkiksi välttämättä ole tarpeellista tehdä eroa uusien ja vierailluiden linkkien välillä, koska osio toistuu jokaisella sivulla samanlaisena ja samassa paikassa. Lisäksi navigaatiolistan elementtien esitystavan voi muuttaa näyttämään linkin vierekkäin, ei alekkain:
.navigointi a:link, .navigointi a:visited {
color: #000099;
background: transparent;
text-decoration: none;
}
.navigointi a:hover {
color: #993333; background-color: #ffff33;
text-decoration: none;
}Nyt määritykset on kohdistettu ainoastaa luokalla navigointi yksilöidyn elementin sisällä oleviin linkkeihin. Tuoreen ja vieraillun linkin määritykset on yhdistetty, joten www-selaimen pitäisi näyttää ne samanlaisina.
Sitten vielä linkit vierekkäin seuravaan määrityksen avulla:
#navigointi li {
display: inline;
margin-right: 0.5em
}Kokeile ja sovella
Näitä läpikäymiämme asioita soveltaen voit rakentaa aluillaan olevaa sivustoasi pidemmälle. Katso vielä pari ulkoasuun liittyvää vinkkiä viimeisestä osiosta, minkä jälkeen voit paneutua kurssin loppuajaksi sivujesi tekemiseen.