Tehtäviä
  1. Aseta pääotsikon (h1) tekstin väriksi punainen.
  2. Aseta tekstikappaleiden fonttikooksi normaalisti 12 pistettä, mutta vain 10 pistettä, jos selainikkuna on enintään 500 pikselin levyinen. Tarkista toimivuus kaventamalla ikkunaa.
  3. Sisennä joka toinen kappale.
  4. Muuttuva teksti. Lisää harjoitustekstin otsikkoon muutama sana. Aseta otsikolle iso merkkivälistys ja sanavälistys (letter-spacing, word-spacing). Toteuta CSS:llä se, että kun osoitin viedään otsikon päälle, molemmat välistykset häviävät (eli teksti tiivistyy) 5 sekunnissa.
  5. Ota käyttöön tavutus (esim. Firefoxissa). Syntyykö ongelmia? Testaa myös, miltä teksti tällöin näyttää, kun se tasataan molemmista reunoista.
  6. Testaa fonttien merkistötukea. Aseta tekstille fontti ja tarkista etenkin kappale, jossa on erikoismerkkejä. Google-fontti Open Sans on käytettävissä.
  7. Aseta harjoitustekstin 6. kappaleessa (ja vain siinä) numeroiden esitys gemenanumeroiksi (”old-style numbers”). Kokeile tämän onnistumista parilla fontilla.
  8. Aseta tekstikappaleiden enimmäisleveydeksi 40 merkkiä.
  9. Aseta pääotsikon (h1) tekstin väriksi punainen, mutta vain kuvaruutuesityksessä (screen-mediassa). Tarkista tulostuksen esikatselusta, että tulostuksessa väri on oletusarvoinen (musta).
  10. Tee ingressille reunaviiva, jonka kulmat on pyöristetty.
  11. Korvaa pääotsikon (h1) sisältö tekstillä ”Hei maailma”.
  12. Tee taulukon riveille vuorovärit taustaksi: joka toisen rivin tausta valkea, joka toisen harmaa.
  13. Tasaa taulukon toisen sarakkeen solut oikealle.
  14. Tee tekstinsyöttöalueista (textarea) sellaisia, että käyttäjä voi muuttaa niiden kokoa pystysuunnassa mutta ei vaakasuunnassa.
CSS-koodi
MDS CSS ref. Sitepoint CSS ref. CSS Snapshot CSS3 Click Chart When can I use… Quirksmode.org CSS info CSS in IE CSSPrefixer W3C CSS3

Kokeilusisältö

Tämä on ingressi. Ingressi on lyhyt ja ytimekäs kappale alussa. Tässä se on merkattu määrittelemälle sille luokka ingressi.

Suvinen, sunnuntainen ehtoopuoli. Hiljainen saaristokirkko hautausmaan keskellä. Kirkon musta paanukatto kohoo korkeana ja vakavana lehviköissään, läntisen auringon välke leikkii sen punaisella seinämällä kirkastaen valkeat akkunanpielet. Sanomaton rauha ilmassa ja ylt’ympärillä. Ainoana äänenä vain haapojen lepatus sammaltuneen kiviaidan vierillä.

Olen aukaissut kirkkotarhan rautaportin, vingahtaen kumahtaa se kiinni takanani saranoillaan ja käytävän somer narahtaa jalkojeni alla. Harmaita haaltuneita puuristejä kahden puolen, tuolla täällä musta malmiristi messinkikilvin, seassa muita korkeampana joku rautatangolleen pujotettu peltilevy, jonka kaartuvalta pinnalta himertää silmään ruostunut, sammaltunut kirjoitus. Hiljaisempaako vielä ristimetsässä, kuin äsken pyhäehtoiseen lepoonsa suljetun rautaportin suulla?

Suomenkielisessäkin tekstissä voi esiintyä vieraita kirjaimia vieraissa nimissä ja sitaattilainoissa. Esimerkkejä: Aëtius, Białowieża, Chişinǎu, Đilas, Erdoğan, Fidži, Galaţi, Helsingør, İzmit, Jáchymov, Klaipėda, Liepāja, Magalhães, Noüy, Orléans, Ploieşti, Quibdó, Rügen, Strauß, Topkapı, Urumtši, Vårdö, Wałęsa, Xaviér, Yucatán, Železný, Åbenrå, Ørsted; đồng, Oʻahu, Saʿd, Vārāṇasī, Khalkidikḗ.

Tässä kappaleessa on huomattavankin pitkiä sanoja: pyyhkäisyelektronimikroskooppi, järjestelmällistyneisyydessäänkin, subsidiariteettiperiaate, kolmivaihekilowattituntimittari, pneumonoultramicroscopicsilicovolcanoconiosis, pseudopseudohypoparathyroidism, Rechtsschutzversicherungsgesellschaften.

Kuningashuoneen jäsenet polveutuvat Umberto I (Maurienne) Valkokädestä (1003–1047 tai 1048). Suvun jäsenet ovat kantaneet arvonimiä Savoijin kreivi (1033) ja herttua (1416), Piemonten ruhtinas, Kyproksen, Jerusalemin ja Armenian kuningas (vuodesta 1460), Sisilian kuningas (1713–20), Sardinian kuningas (1716) ja Italian kuningas (1860). Italian viimeiseksi kuninkaaksi jäi Umberto II, joka hallitsi vain 33 päivää vuonna 1946.

Tämä kappale sisältää monenlaisia ilmauksia, joissa on alaindeksejä, esimerkiksi CO2, ja yläindeksejä, esimerkiksi 5,1 × 106. Ne voivat aiheuttaa epätasaisen rivivälin. Sama koskee tilannetta, jossa teksti sisältää erikorkuisia merkkejä, esimerkiksi erikokoisilla fonteilla kuten X taikka merkkejä fontista, jonka oletusriviväli on suurempi kuin muun tekstin, kuten Gautami.

Luetelma:

  • mustikka
  • mansikka
  • vadelma
Taulukko:
Pelaaja Pisteet
Zaldor 181 891
Grondim171 901
Yugha69 191
Novice 65 072
Bulbul 9 198
Testilomake: