CSS - Opmaken van links


Met behulp van CSS zijn links vorm te geven naar wens. Niet alleen bepaal je de opmaak van links maar ook de mouse-over en de opmaak van een link waar al eens op is geklikt.

Een normale link geef je aan in CSS op de onderstaande manier, deze opmaak is van toepassing op alle links op een pagina of eigenlijk website. In de code staat eerst de kleur van de link ingesteld wat in dit geval zwart is met daaronder de 'text-decoration' waarvoor wordt aangegeven none. Zodoende wordt de standaard onderlijning weggehaald bij een link, door hier "underline" te gebruiken in plaats van "none" wordt er juist wel een lijn onder de link geplaatst. Op deze manier kun je nog meer opmaak invoeren betreffende links.

a:link {
        color: black;
        text-decoration: none;
}


Links per element

Zoals gezegd wordt de bovenstaande opmaak toegepast op alle links op een website maar je kan natuurlijk ook per element zoals bijvoorbeeld een div de opmaak van links bepalen. Plaatst dan voor de a de naam van het element en eventueel de classnaam.

div.inhoud a:link {
        color: black;
        text-decoration: none;
}


Mouse-over

Naast de eigenschappen voor een gewone link kun je ook de eigenschappen invoeren voor de opmaak bij een mouse-over op een link (als je met de muis op een link gaat staan). Dit doe je door ':hover' toe te voegen aan de link in de CSS zoals in het voorbeeld.

a:hover {
        color: red;
        text-decoration: underline;
}


Visted

Dan kan er ook nog worden ingesteld met CSS wat de opmaak moet zijn voor links waar al eens op is geklikt door bezoekers. In dat geval wordt 'visited' toegevoegd aan de CSS.

a:visited {
        color: red;
        text-decoration: none;
}