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

Beheers de basisprincipes van CSS, de opmaakt taal die het uiterlijk en de uitstraling van webpagina's transformeert. Verken kernconcepten zoals tekststijlen, kleuren, afstand, het boxmodel, Flexbox en decoratieve effecten. Ontwikkel vaardigheden om visueel aantrekkelijke en goed gestructureerde webpagina's te creëren.

Begrijpen hoe CSS wordt gekoppeld aan HTML en hoe stijlen worden toegepast via selectors.
Toepassen van kleuren, tekststijlen en hover-effecten om de visuele presentatie te beheersen.

Verbeter typografie met behulp van regelhoogte, afstand, lettertype-eigenschappen en aangepaste lettertypen. Beheer lettertypefamilies, gewicht, stijl en grootte voor betere leesbaarheid.

Beheer de lay-outstructuur met behulp van margin-, padding-, border- en width-eigenschappen. Inzicht in het gedrag van box-sizing en elementweergavetypen zoals block, inline en inline-block.

Beheer horizontale en verticale lay-outs met behulp van Flexbox-eigenschappen. Pas richting, uitlijning en afstand aan om UI-componenten te structureren.

Verbeter lay-outs met achtergrondkleuren, afbeeldingen, pseudo-elementen en schaduwen. Stijl visuele componenten voor diepte en contrast.

Challenge: Style Your First Web Page

Task