CSS

Takaisin

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

Inline style

Voit kirjoittaa css käyttäen style attribuuttia (lue html sivu jos et ymmärrä). Esimerkiksi koodi <p style="color: red">Tekstiä</p> tuottaa tälläisen kappaleen:

Tekstiä

Style sheet

Useammin tyylejä kuitenkin kirjoitetaan erilliseen css tiedostoon. Tämä mahdollistaa samojen tyylien jakamisen moneen paikkaan. Homma hoituu kahdella askeleella. Ensin tehdään css tiedosto. Tämä esimerkkiprojekti käyttää style.css joka sivulla, 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 tagit tyypillisesti laitetaan head tagin sisälle html alkuun. 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. Halutessasi voit listata monta valitsinta erottelemalla ne välilyönnillä tai yhdistellä valitsimia kirjoittamalla ne yhteen. Esimerkiksi:

div.punainen p {
  color: red;
}

Muuttaa kaikki p-tagit ja div-tagit joilla on class="punainen" punaisiksi.

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, hex värejä, esim "rgb(255, 99, 71)", tai "#123456". On hyvin yleistä että css sääntö tukee montaa eri muotoista arvoa.

Moni sääntö on aika itsestään selvä. background-color ja font-size lienevät selkeitä ilman suurempaa selitystä. Sääntöjä löytää googlaamalla ja niillä voi tehdä mitä tahansa kunhan niitä yhdistelee oikein.

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 ensimmäisellä on padding ja toisella margin.

Padding

Margin

Taustan lisäksi vierekkäisten elementtien marginit ja paddingit toimivat eri lailla. Elementti saa aina paddinginsä, mutta jos vierekkäisillä elementeillä on margin, tulee niiden väliin tilaa suuremman marginaalin mukaan. Molempia marginaalia ja paddingiä voi myös antaa valikoidusti vain tietyille sivuille.

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.

Layoutit

Yksi yleisin css käyttötarkoituksista on asettelu. Tämän voi tehdä parilla tavalla, yleisin niistä on flexbox. Tämä selittää lisää selkein esimerkein, 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. Jos luet lähdekoodia, osa tyylistä on inline ja osa on erillisessä flex-demo.css tiedostossa css kansion sisällä.

Ja sama toiseen suuntaan

Joka sivua voi ajatella sisäkkäisinä flexboxeina jotka venyvät eri suuntiin. Joskus on parempi käyttää muita metodeja, esimerkiksi grid, mutta sen voi opetella tarpeen tullen. Nyt tiedät ainakin yhdestä tavasta asetella sisältöä. Suosittelen vahvasti että käytät tätä sen sijaan että koitat golffata mystisillä marginaaleilla asiat oikeisiin paikkoihin.

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ä.

Vaihtaa väriä itsekseen
Pärisee kun laittaa hiiren päälle
Liikkuu

Häihälän mielipide animaatioista

Huono animaatio <<<<< keskivertainen animaatio <<< ei animaatiota ~= hyvä animaatio < Loistava animaatio. Eli jos teet animaation niin tee vähintään hyvä tai se häiritsee enemmän kun siitä on iloa.