CSS on merkkauskieli – ei siis varsinainen ohjelmointikieli. CSS:llä pyydetään web-selainta muuttamaan haluttujen HTML-elementtien muotoiluun (ulkonäköön ja sijoitteluun) vaikuttavia tekijöitä.

CSS:n onnistumiseen tarvitaan kolme asiaa:

• miten osutaan oikeaan elementtiin (=> selektorit)
• mitä puolia elementeistä voi muuttaa (=> katsotaan ohjeet ja standardit)
• pitää olla kokonaisvaltainen visio siitä, mitä haluaa aikaiseksi – sen jälkeen keinot yleensä löytyvät kun näkee vaivaa ja testailee

p {
    background-color: dodgerBlue;
}

CSS:ssä olennaista on selektori. Yllä esimerkissä on käytetty p -selektoria; se kohdistaa kaarisulkeiden { } sisällä olevan litanian vaikuttamaan yhtä tekstikappaletta (P, engl. paragraph).

Web-selaimella on aina jotkin vakiovarvot kaikille sen tukemille HTML-elementeille: Sinun tekemäsi CSS sitten muuttaa näitä – mikäli CSS on tehty oikein! Alkuun isoin ongelma on usein se, että oma CSS ei tunnu “osuvan” niihin elementteihin, joihin haluaa vaikuttaa. Eli vaikka tekee mielestään jonkin muutoksen, selain näyttää täysin muuttumattoman sivun uudelleenlatauksen jälkeen.

Miten osua haluttuihin kohteisiin? Selektorit!

Selektoreja on muutamia erilaisia:

• id
• luokka
• pseudo

Tarkin on ‘id’-selektori. Tällä on tarkoitus muuttaa yhden ainoan nimeltä tunnetun (minkä tahansa) elementin ulkoasua.

Esimerkki id -selektorin käytöstä

Ajatellaan että meillä on tärkeä valintanappi sovelluksessa.

Valinnan pitää olla pysyvä, kunnes käyttäjä käy toisen kerran painamassa samaa nappia. Eli tyyli pysyy. Toisaalta, valintanapeille on tärkeää, että vain se nappi, jota painetaan, muuttaa tilaa. Kuulostaa sopivalta paikalta käyttää ‘id’:tä.

HTML

Selaimen pisteyttää CSS-rivit

On oikeastaan lohduttavaa huomata, että selaimen ja CSS:n suhde on lopulta hyvin matemaattinen. Jokainen rivi CSS:ää saa pistemäärän (kutsutaan nimellä specificity). Selektorien yksityiskohtien määrästä ja tyypeistä ropisee eri määrä pisteitä. Tarkempi määritelmä yliajaa eli jää voimaan.

Lisäksi on olemassa ‘!important’ arvo, jota voidaan käyttää hätätilassa pakottamaan voimassaolo aina rivikohtaisesti.

Mikä on ‘cascading’ ja kuinka se vaikuttaa?

Sana ‘cascade’ tuossa CSS:ssä (Cascading style sheets) tarkoittaa, että tyylimäärittelyt tulevat voimaan sitä mukaa kun niitä kohdataan CSS-tiedostossa. Viimeisin jää voimaan, eli myöhemmin tulevat (jo aiemmin määritellyt) ovat voimakkaampia.

Jos selektori ei osu olemassaolevaan elementtiin, se luo uuden tyylin eli määritelmän. Tätä tyyliä HTML voi käyttää aivan samaan tapaan kuin vakiona selaimessa olevia tyylejä.

• elementin nimi
• uuden luokan luominen

Kaikki CSS-rivit ovat samanlaisia muodoltaan:

selektori { määrittely1; määrittely2; … }

Selektorilla kohdistetaan vaikutus haluttuihin HTML-elementteihin. Yksinkertaisimillaan selektori on suoraan elementin nimi: esimerkiksi ‘P’ joka muuttaisi kaikkien perus tekstikappaleiden tyylin.

CSS selektorien esimerkkejä

Periaate CSS:n web-sivuun tekemästä vaikutuksesta voitaisiin tiivistää: jollei muuta ole määritelty, käytetään selaimen vakiomuotoilua. Muutoin käytetään CSS:n määritelmää (eli se yliajaa vakiomuotoilut).