CSS tulee sanoista Cascading Style Sheet. Se antaa muuttaa melkein mitä tahansa sivun ulkonäöstä.
Voit kirjoittaa css käyttäen style attribuuttia (lue html sivu jos et ymmärrä). Se tapahtuu näin:
<p style="color: red">Tekstiä</p>
Edellinen koodi näyttää tältä:
Tekstiä
Useammin tyylejä kuitenkin kirjoitetaan erilliseen css tiedostoon. Tämä
mahdollistaa samojen tyylien jakamisen moneen paikkaan suhteellisen
helposti. Homma hoituu kahdella askeleella. Ensin tehdään css tiedosto. Tämä
esimerkkiprojekti käyttää style.css
, mutta tiedoston nimi voi
olla mitä vaan. Toinen vaihe on lisätä html tiedostoon
<link rel="stylesheet" href="polku tuohon stylesheettiin" />
Tässä kohtaa voisi olla avuliasta katsoa miten tämä sivu on tehty. Link
löytyy head sisältä.
Rakenne erillisessä style sheetissä toimii kutakuinkin näin:
valitsin {
sääntö: arvo;
toinen-sääntö: toinen-arvo;
}
Valitsin kertoo mihin elementteihin nämä säännöt pätee. Se voi olla joku
tag, esim p, h1, tai a. Se voi myös viitata tietyn classin tai id:n omaaviin
elementteihin. Classeihin viitataan pisteellä .foo
ja id
viitataan risuaidalla #bar
. Esimerkiksi jos tekee näin:
.punainen {
color: red;
}
Ja style sheet on oikein linkattu, jos elementille antaa class punainen, niin sen teksti muuttuu punaiseksi.
Ollaan jo nähty kuinka color sääntöä voidaan käyttää. Se muuttaa tekstin väriä. Arvoksi voi antaa selkokielisen värin, esim "red" tai "blue". Tämän lisäksi voi käyttää rgb, hsl tai hex värejä, esim "rgb(255, 99, 71)", "hsl(0, 100%, 50%)", tai "#123456". On hyvin yleistä että css sääntö tukee montaa eri muotoista arvoa.
Moni sääntö on aika itsestään selvä. Esimerkiksi
background-color
ja font-size
lienevät semi
selkeitä. Valitettavan moni sääntö ei ole hirveän selkeä, mutta google
auttaa tässäkin.
Padding ja margin ovat aika käytettyjä. Molemmat niistä raivaavat elementin ympärille lisää tilaa. Erona on se että padding laajentaa myös elementin taustaa ja margin ei. Eli jos elementillä on vaikka background color niin ne näyttävät vähän erilaiselta. Alla on kaksi p tagia, molemmilla background-color, mutta toisella on padding ja toisella margin.
Padding
Margin
Padding, margin ja moni muu hyväksyy erinäisiä yksiköitä Kertoo lisää Suosikaa suhteellisia (relative) yksiköitä, ne tuppaavat aiheuttaa vähemmän ongelmia eri näytön kokojen kanssa yms.
Tässä kohtaa herää ehkä kysymys, että mitä tapahtuu jos samalle elementille on annettu ristiriitaisia ohjeita. Teksti voi olla vaan yhden väristä niin mitä tapahtuu jos tekstin värin laittaa useaksi arvoksi. Lyhyt vastaus on että joku sääntö voittaa. Se mikä sääntö voittaa riippuu tarkkuudesta. Jos yksi sääntö on asetettu koko sivulle ja toinen on asetettu vaan tiedyn id omaaville elementeille, jälkimmäinen sääntö voittaa koska se on tarkempi.
Yksi yleisin css käyttötarkoituksista on asettelu. Tämän voi tehdä parilla tavalla, yleisin niistä lienee flexbox. Tämä selittää lisää, mutta lyhyesti flexbox on tapa tehdä laatikko jonka sisällä olevat elementit järjestävät itsensä. Tämän alla olevat laatikot säätävät itsensä eri tavalla riippuen näytön koosta. Voit kokeilla vaihtaa ikkunan kokoa ja nähdä miten laatikot liikkuvat.
Ja sama toiseen suuntaan
Tässä haetaan lähinnä sitä kuinka flexboxilla voi asetella sivuston miten haluaa. Joskus on parempi käyttää grid, mutta sen voi opetella tarpeen tullen.
Viimeisenä muttei vähäisimpänä, css pystyy kaikenlaisiin hienoihin animaatioihin. Suurta osaa niistä on vaikea käyttää, mutta tässä on pari esimerkkiä.
Häihälän mielipide animaatioista: Huono animaatio <<<<< keskivertainen animaatio <<< ei animaatiota ~= hyvä animaatio < Loistava animaatio.