CSS

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. Voit katsoa selaimen työkaluista sivun HTML alkua ja löytää linkin css tiedostoon. 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 div-tagit joilla on class="punainen" ja kaikki p-tagit 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", mutta myös rgb värejä, esim "rgb(255, 99, 71)", tai hex värejä, esim "#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ä melkein mitä tahansa.

Padding ja margin ovat aika käytettyjä. Molemmat niistä raivaavat elementin ympärille lisää tilaa. Erona on se että padding luoma tila on elementin sisällä ja margin ei. Jos elementillä on taustaväri tai reunus niin eron näkee helposti. Alla on kaksi p tagia, molemmilla background-color, mutta ensimmäisellä on padding ja toisella margin. Arvot ovat samat, eli elementit vievät saman verran tilaa sivulla.

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. Itse tykkään käyttää rem. Padding/margin esimerkin laatikoilla on 1rem margin/padding. rem = root em, eli yksinkertaisesti sanottuna se määräytyy tekstin koon mukaan. Tämä on mukava esim puhelinten ja vanhojen vähemmän näyttöjen kanssa. ( vähemmän pikseleitä)

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 marginaaleilla asiat oikeisiin paikkoihin.

Animaatiot

Viimeisenä muttei vähäisimpänä, css pystyy 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. Eli jos teet animaation niin tee vähintään hyvä tai se häiritsee enemmän kun siitä on iloa.