CSS Schnellstart – Links

Wir haben grade schon von Pseudoklassen gesprochen und genau hier werden wir diese benötigen.

Wenn du dir einen stinknormalen Link auf einer Webseite anschaust, ist das erstmal nichts Besonderes.

Sobald du aber anfangen willst so einen Link richtig zu stylen, wird es eine kleine Herausforderung.

Ein Link wird durch das a-Element repräsentiert. Dieses kann man stylen.

Allerdings gibt es 4 Pseudoklassen, die man beim Styling beachten sollte: link, visited, hover und active

a:link {
  color: green;
}

a:visited {
  color: red;
}

a:hover {
  color: darkred;
}

a:active {
  color: blue;
}

Die Pseudoklasse link, beschreibt einfach einen ganz normalen Link, der dargestellt wird.

Mit visited wird ein Link gestyled, der bereits schonmal besucht, also angeklickt wurde.

Die hover Pseudoklasse hast du bereits kennengelernt und mit active wird das Styling festgelegt, welches gezeigt wird, wenn das Element per Klick aktiviert wurde.

Ab geht’s in die Übung: