Opmerkingen vooraf:

Gebruik een klasse of id enkel waar dit expliciet gevraagd wordt. Alle andere aanpassingen moet je dus doen zonder klasse of id toe te voegen.
Gebruik dan CSS-selectors¹ om de elementen te beschrijven.
Gebruik enkel CSS-eigenschappen die ook op de API² staan, tenzij expliciet gevraagd wordt om dit op te zoeken. Je mag ook geen extra tags toevoegen om een selector te kunnen beschrijven.

Voor volgende opdrachten voeg je de css toe in ugent.css en doe je eventueel kleine aanpassingen in het bestand index.html:

Zorg dat de tekst van alle hoofdingen (h1, h2, h3,…) UGent-blauw is (zoek de rgb- of hex-waarde van het UGent-blauw op via styleguide.ugent.be³).
Bovendien moet de achtergrond van alle hoofdingen veranderen naar UGent-geel als je er met de muis over beweegt.
Voorzie onder de volledige hoofding (header) 30 pixels extra ruimte.
Benadrukte delen (strong) moeten altijd een UGent-blauwe achtergrondkleur hebben.
Zorg ervoor dat alle afbeeldingen in de tabel van het reisschema een hoogte hebben van exact 100 pixels. Je mag ervan uitgaan dat er maar één tabel is die ook afbeeldingen bevat. Zoek hiervoor de juiste CSS-combinator⁴.
Bovendien moeten de afbeeldingen gecentreerd zijn in de cel van de tabel. Om dit op te lossen mag je maar één css-eigenschap gebruiken!
Je mag hier gebruik maken van een class. Tip: je moet css toepassen op de cel van de tabel, niet op de afbeelding zelf.
Enkel de afbeelding die in de header staat moet exact 150 pixels hoog zijn.
De figuur die in de header staat moet je naar rechts laten verspringen. Bovendien moet een solid boord toegevoegd worden aan de figuur. Deze boord moet ook afgerond zijn - hier mag je de CSS-eigenschap opzoeken (staat niet op de API).
De figuur moet volledig boven de eigenlijke inhoud (het gedeelte in main) getoond worden. Los dit op door enkel CSS toe te voegen. Controleer met Ctrl+ en Ctrl- dat dit ook correct blijft als je ‘inzoomt’. De eigenlijk inhoud van de website mag dus niet ‘naast’ de figuur getoond worden.
Voorzie een UGent-gele border van 3 pixels dik rond alle cellen van de tabel met het reisschema en centreer de tabel in het midden van het scherm.
Om de dubbele borders te vermijden moet je voor de tabel extra CSS toevoegen. Gebruik hierbij collapse (zoek dit op, staat niet op de API). Hieronder een voorbeeld van een deel van de tabel met de gevraagde CSS:
In Homepagina -verplichte HTML5-tags⁵ (5) werd een voettekst toegevoegd met een referentie naar een externe bron. Wijzig de achtergrond van deze voettekst naar UGent-geel, als je er met de muis over beweegt .
Wijzig enkel de footer die onderaan je pagina staat, zodat er 20 pixels extra ruimte wordt toegevoegd boven deze footer. Bovendien moet je deze footer in vet staan EN volledig in hoofdletters gezet worden met behulp van css. Deze opmaak mag je enkel toepassen op de footer onderaan. Zoek hiervoor de juiste CSS-combinator⁶. Gebruik de eigenschap die in de slides en op de API staat, anders zal je hier geen punten kunnen verdienen.
Laat de datum in die voettekst helemaal naar rechts verspringen, jouw naam blijft op dezelfde lijn helemaal links staan. Hieronder wordt de aangepaste footer (met de twee laatste aanpassingen) getoond: