Standard appearance of hyperlinks on a website depends on the browser. Each browser can display links and their variants (with different pseudo-classes) in a different way.

Usually we want to set our own styles so to display links in the same way in any browser.

Links can have different states, and each of this states can be styled. This states are called pseudo-classes.

• a:link – default link style
• a:visited – link, that was already visited
• a:focus – determines the appearance of the link when the browser’s “attention” is focused on it, e.g. when the user uses the tab to navigate the links
• a:hover – determines the appearance of the link when you hover over it
• a:active – determines the appearance of the currently active link (when you click on it)

Użycie pseudoklas sprawia, że możemy nadać linkom na naszej stronie specyficzny wygląd, np. określić ich kolor, wagę czcionki, to, czy mają posiadać jakiś dekorator tekstu czy nie (np. podkreślenie), albo usunąć ramkę, tzw. outline.

Using pseudo-classes means that we can give links on our website specific styles, e.g. determine their color, font weight, text decoration (e.g. underline), or remove the frame, the so-called outline.

Here is some link examples with different styles:

See the Pen link styling with pseudoclass by Joanna (@JoannaEl) on CodePen.