Verkkosivusto näyttää lyhyitä tietoja planeetoista. Paranna ulkoasua soveltamalla seuraavia tyylejä:
- Valitse kaikki elementit, joilla on **text**-luokan nimi, ja aseta tekstin väri **ruskeaksi**.
- Valitse kaikki elementit, joilla on **sub-text**-luokan nimi, ja aseta tekstin väri **harmaaksi**.
- Lisää hover-efekti kaikkiin elementteihin, joilla on **heading**-luokan nimi. Muuta tekstin väri **tummansiniseksi**, kun hiiren osoitin on elementin päällä.

PCFkb2N0eXBlIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxzZWN0aW9uPgogICAgICA8aDIgY2xhc3M9ImhlYWRpbmciPkp1cGl0ZXI8L2gyPgogICAgICA8aW1nCiAgICAgICAgc3JjPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb2RlLTEvY3NzLWZ1bmRhbWVudGFscy9pbnRyb2R1Y3Rpb24rdG8rY3NzL2p1cGl0ZXIrY2hhbGxlbmdlLnBuZyIKICAgICAgICBhbHQ9Ikp1cGl0ZXIiCiAgICAgICAgd2lkdGg9IjMycHgiCiAgICAgIC8+CiAgICAgIDxwIGNsYXNzPSJzdWItdGV4dCI+V2FzIGZvcm1lZCA0LjUgYmlsbGlvbiB5ZWFycyBhZ288L3A+CiAgICAgIDxwIGNsYXNzPSJ0ZXh0Ij4KICAgICAgICBKdXBpdGVyLCB0aGUgZmlmdGggcGxhbmV0IGZyb20gdGhlIFN1biwgaXMgdGhlIGxhcmdlc3QgcGxhbmV0IGluIG91cgogICAgICAgIHNvbGFyIHN5c3RlbS4gSXQgaGFzIGEgbWFzc2l2ZSByZWQgc3BvdCBhbmQgb3ZlciA3MCBrbm93biBtb29ucy4KICAgICAgPC9wPgogICAgPC9zZWN0aW9uPgogICAgPHNlY3Rpb24+CiAgICAgIDxoMiBjbGFzcz0iaGVhZGluZyI+U2F0dXJuPC9oMj4KICAgICAgPGltZwogICAgICAgIHNyYz0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY29kZS0xL2Nzcy1mdW5kYW1lbnRhbHMvaW50cm9kdWN0aW9uK3RvK2Nzcy9zYXR1cm4rY2hhbGxlbmdlLnBuZyIKICAgICAgICBhbHQ9IlNhdHVybiIKICAgICAgICB3aWR0aD0iMzJweCIKICAgICAgLz4KICAgICAgPHAgY2xhc3M9InN1Yi10ZXh0Ij5XYXMgZm9ybWVkIDQgYmlsbGlvbiB5ZWFycyBhZ288L3A+CiAgICAgIDxwIGNsYXNzPSJ0ZXh0Ij4KICAgICAgICBTYXR1cm4sIHRoZSBzaXh0aCBwbGFuZXQgZnJvbSB0aGUgU3VuLCBpcyBrbm93biBmb3IgaXRzIGljb25pYyByaW5ncwogICAgICAgIG1hZGUgb2YgaWNlIGFuZCByb2NrLiBJdCBoYXMgb3ZlciA4MCBtb29ucyBhbmQgYSB1bmlxdWUgaGV4YWdvbmFsIHN0b3JtLgogICAgICA8L3A+CiAgICA8L3NlY3Rpb24+CiAgPC9ib2R5Pgo8L2h0bWw+

LyogQ2hhbmdlIHRoZSBjb2RlIGJlbG93IHRoaXMgbGluZSAqLwouX19fIHsKICBfX186IF9fXzsKfQoKX19fIHsKICBfX18KfQoKLmhlYWRpbmdfX18gewogIF9fXwp9CgovKiBDaGFuZ2UgdGhlIGNvZGUgYWJvdmUgdGhpcyBsaW5lICovCi5oZWFkaW5nIHsKICBjb2xvcjogZmlyZWJyaWNrOwp9

- Käytä `.` valitaksesi elementit luokan nimen perusteella.
- Käytä `:hover` soveltaaksesi tyylejä, kun elementtiä leijutetaan hiirellä.

LyogQ2hhbmdlIHRoZSBjb2RlIGJlbG93IHRoaXMgbGluZSAqLwoudGV4dCB7CiAgY29sb3I6IGJyb3duOwp9Cgouc3ViLXRleHQgewogIGNvbG9yOiBncmF5Owp9CgouaGVhZGluZzpob3ZlciB7CiAgY29sb3I6IGRhcmtibHVlOwp9CgovKiBDaGFuZ2UgdGhlIGNvZGUgYWJvdmUgdGhpcyBsaW5lICovCi5oZWFkaW5nIHsKICBjb2xvcjogZmlyZWJyaWNrOwp9

Hallitse CSS:n perusteet, tyylikieli, joka muuttaa verkkosivujen ulkoasun ja tuntuman. Tutustu keskeisiin käsitteisiin, kuten tekstityyleihin, väreihin, välistyksiin, laatikkomalliin, Flexboxiin ja koristeellisiin tehosteisiin. Kehitä taidot luoda visuaalisesti houkuttelevia ja hyvin jäsenneltyjä verkkosivuja.

Ymmärrä, miten CSS yhdistyy HTML:ään ja miten tyylejä sovelletaan selektoreiden avulla. Käytä värejä, tekstin muotoilua ja hover-efektejä visuaalisen esityksen hallintaan.

Paranna typografiaa käyttämällä riviväliä, välistyksiä, fonttiominaisuuksia ja mukautettuja fontteja. Hallitse fonttiperheitä, painoa, tyyliä ja kokoa paremman luettavuuden saavuttamiseksi.

Hallitse asettelun rakennetta käyttämällä margin-, padding-, border- ja width-ominaisuuksia. Ymmärrä laatikon koon määrittely sekä elementtien näyttötyypit, kuten block, inline ja inline-block.

Hallitse vaakasuoria ja pystysuoria asetteluja Flexbox-ominaisuuksien avulla. Säädä suuntaa, kohdistusta ja välistystä käyttöliittymäkomponenttien rakenteen määrittämiseksi.

Paranna asetteluja taustavärien, kuvien, pseudoelementtien ja varjojen avulla. Tyylittele visuaaliset komponentit syvyyden ja kontrastin luomiseksi.

Haaste: Tyylittele Ensimmäinen Verkkosivusi