De website toont beknopte informatie over planeten. Verbeter het uiterlijk door de volgende stijlen toe te passen:
- Selecteer alle elementen met de **text** classnaam en stel de tekstkleur in op **bruin**.
- Selecteer alle elementen met de **sub-text** classnaam en stel de tekstkleur in op **grijs**.
- Voeg een hover-effect toe aan alle elementen met de **heading** classnaam. Verander de tekstkleur naar **donkerblauw** wanneer erover wordt gehoverd.

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

LyogQ2hhbmdlIHRoZSBjb2RlIGJlbG93IHRoaXMgbGluZSAqLwouX19fIHsKICBfX186IF9fXzsKfQoKX19fIHsKICBfX18KfQoKLmhlYWRpbmdfX18gewogIF9fXwp9CgovKiBDaGFuZ2UgdGhlIGNvZGUgYWJvdmUgdGhpcyBsaW5lICovCi5oZWFkaW5nIHsKICBjb2xvcjogZmlyZWJyaWNrOwp9

- Gebruik `.` om elementen op classnaam te selecteren.
- Gebruik `:hover` om stijlen toe te passen bij hoveren.

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.

Uitdaging: Style je eerste webpagina