CSS

Takaisin

CSS tulee sanoista Cascading Style Sheet. Se antaa muuttaa melkein mitä tahansa sivun ulkonäöstä.

Inline style

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ä

Style sheet

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.

Esimerkki sääntöjä

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

Yksiköt

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.

Tarkkuus ja !important

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.

Layoutit

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.

Animaatiot

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.