Oefening 12 - Links

Tot nu toe hebben we bijna elk onderdeel van de website een bepaalde stijl kunnen geven. Alleen de links blijven een beetje achter. Je hebt misschien al gemerkt dat links van kleur veranderen wanneer je er op klikt en wanneer je die pagina al een keer hebt bezocht. Dit wordt bepaald in de link states.

Link states

Er zijn vier verschillende staten waarin links kunnen zitten:

• a:link – een normale, onbezochte link

• a:visited – een bezochte link

• a:hover – een link wanneer men er overheen zweeft met de cursor

• a:active – een link wanneer die wordt aangeklikt

Deze states kunnen gebruikt worden als selector in CSS en op die manier kun je de stijl van de link in die gevallen aanpassen. In het CSS-bestand moeten de selectors in dezelfde volgorde als hierboven voorkomen, anders werken ze niet.

1. Pas de links in je nav aan met CSS om ze er beter uit te laten zien.

Links als knoppen

Je kunt deze met deze selectors links er ook uit laten zien als knoppen, door bijvoorbeeld een background-color of een border te gebruiken. Moderne websites hebben vrijwel nooit meer normale tekst als links, het zijn vaak knoppen. Kijk voor inspiratie en voorbeelden van een menubalk met CSS op https://www.w3schools.com/css/css_navbar.asp

1. Pas je menubalk aan om van knoppen voorzien te zijn in plaats van tekst.