The website displays brief information about planets. Improve its appearance by applying the following styles:
- Select all elements with the **text** class name and set the text color to **brown**.
- Select all elements with the **sub-text** class name and set the text color to **gray**.
- Add a hover effect to all elements with the **heading** class name. Change the text color to **darkblue** when hovered.

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

LyogQ2hhbmdlIHRoZSBjb2RlIGJlbG93IHRoaXMgbGluZSAqLwouX19fIHsKICBfX186IF9fXzsKfQoKX19fIHsKICBfX18KfQoKLmhlYWRpbmdfX18gewogIF9fXwp9CgovKiBDaGFuZ2UgdGhlIGNvZGUgYWJvdmUgdGhpcyBsaW5lICovCi5oZWFkaW5nIHsKICBjb2xvcjogZmlyZWJyaWNrOwp9

- Use `.` to select elements by class name.
- Use `:hover` to apply styles when hovering.

LyogQ2hhbmdlIHRoZSBjb2RlIGJlbG93IHRoaXMgbGluZSAqLwoudGV4dCB7CiAgY29sb3I6IGJyb3duOwp9Cgouc3ViLXRleHQgewogIGNvbG9yOiBncmF5Owp9CgouaGVhZGluZzpob3ZlciB7CiAgY29sb3I6IGRhcmtibHVlOwp9CgovKiBDaGFuZ2UgdGhlIGNvZGUgYWJvdmUgdGhpcyBsaW5lICovCi5oZWFkaW5nIHsKICBjb2xvcjogZmlyZWJyaWNrOwp9

Behersk det grundlæggende i CSS, sproget til styling, der forvandler udseendet og oplevelsen af websider. Udforsk kernekoncepter såsom tekststilarter, farver, afstand, box-modellen, Flexbox og dekorative effekter. Opbyg færdigheder til at skabe visuelt engagerende og velstrukturerede websider.

Forstå, hvordan CSS forbindes til HTML, og hvordan stilarter anvendes gennem selektorer.
Anvendelse af farver, tekstformatering og hover-effekter til at kontrollere visuel præsentation.

Forbedring af typografi ved hjælp af linjehøjde, afstand, skrifttypeegenskaber og brugerdefinerede skrifttyper. Kontrol af skrifttypefamilier, vægt, stil og størrelse for øget læsbarhed.

Styring af layoutstruktur ved hjælp af margin, padding, kanter og breddeegenskaber. Forståelse af boksstørrelsesadfærd og elementvisningstyper såsom blok, inline og inline-blok.

Styring af horisontale og vertikale layouts ved hjælp af Flexbox-egenskaber. Justering af retning, justering og afstand for at strukturere UI-komponenter.

Forbedring af layouts ved brug af baggrundsfarver, billeder, pseudo-elementer og skygger. Styling af visuelle komponenter for dybde og kontrast.

Challenge: Style Your First Web Page

Task