CSS:n (Cascading Style Sheets) käytännön tarkoitus on luoda visuaalinen ulkonäkö, eli ilme, webin sivustoille. Käytännössä CSS:llä luodaan myös käyttöliittymiä perinteisemmässä merkityksessä, eli sillä tyylitellään web-selaimen komponentteja: napit, menut, hotspot-alueet. Myös pieniä hyödyllisiä yksityiskohtia, kuten animaatioita, voidaan lisätä CSS:n avulla.

Oma oppimistarinani CSS:stä

Tähän asti olin täysi n00bie CSS:ssä. Sen rooli oli ollut projekteissa suhteellisen pieni; joko osana jotain komponenttikirjastoa – jolloin en juurikaan nähnyt tarvetta perehtyä konepellin alla olevaan CSS:ään – tai tein projekteja joissa muotoilua ja ilme sujui myös heikohkolla osaamisellani.

Nyt halusin oppia lisää! CSS oli jäänyt kytemään, selkeästi.

Projektini: CSS analog clock (kello)

Opin parhaiten kun teen jotain konkreettista. Projektiksi otin “seinäkellon”, eli tavoitteena on luoda CSS:llä analoginen kellotaulu: 2 viisari (tuntiviisari ja minuuttiviisari), numerot 1-12 kuten oikeassa kellossa; ja tietysti oikean kuluvan ajan kytkeminen kelloon, siten että se näyttää oikeaa aikaa.

Siinä on siis speksi.

Seuraavassa osassa pilkon analogisen kellon rakentamisen osasiin, ja kerron miten opin projektin avulla CSS:ää.

Ennenpitkää kun CSS:ää opiskelee, törmää mitoittamiseen. Jokainen designeri haluaa kontrollia käyttöliittymänsä käyttäytymiseen ja myös staattiseen ulkonäköön. Webissä asioita ei voi varsinaisesti hakata (ainakaan kovin helposti) pikselintarkasti kiveen, mutta taitavalla CSS:n käytöllä saavutetaan hyvä lopputulos.

Kellon kanssa kyse on myös mielenkiintoisesta kysymyksestä: miten ihmeessä saadaan tietokoneelta oikea “realtime clock” kellonaika siirtymään CSS:ään, siten että viisarit ovat oikeissa asennoissa?

Nähdään pian osassa 2!