Hyperlinks met CSS opmaken Koen Van Cauwenberge In

Hyperlinks met CSS opmaken Koen Van Cauwenberge

In de CSS-code • Hier is een voorbeeld van een CSS-codering voor een hyperlink: a: link { color: #8 B 0000; text-decoration: none; } a: visited { color: #666666; text-decoration: none; } a: active { color: #000099; text-decoration: none; } a: hover { color: #333333; text-decoration: underline; }

Uitleg bij codes • a: link is voor als je de hyperlink ziet • a: visited is de opmaak van een hyperlink nadat je hem bezocht hebt • a: active is de opmaak van de hyperlink als je erop klikt • a: hover is de opmaak van de hyperlink als je er met de muis overgaat. • color: #333333; geeft een kleur aan (in code met cijfers) • text-decoration: none; neemt de lijn onder hyperlink weg

Meerdere opmaken voor <a> • Het kan zijn dat je hyperlinks een andere opmaak moeten krijgen op verschillende webpagina’s. • Je werkt hiervoor met classes. • Na de te definiëren HTML-tag plaats je een punt gevolgd door een naam die jij kiest.

In de CSS-code met een class • Hier is een voorbeeld van een CSS-codering voor een hyperlink: a. anders: link { color: #666666; text-decoration: none; } a. anders: visited { color: #8 B 0000; text-decoration: none; } a. anders: active { color: #333333; text-decoration: none; } a. anders: hover { color: #000099; text-decoration: underline; }

In de HTML-code met een class • De hyperlinks die nu de anders-class moeten volgen, krijgen class="anders" in HTMLcodering. • Bijvoorbeeld: <a class="anders" href="http: //www. google. be">Google</a> • De hyperlinks die de gewone CSS-regel voor hyperlinks moeten volgen, blijven: <a href="http: //www. google. be">Google</a>