ʫ

Sie haben den Artikel erfolgreich in den Warenkorb gelegt.
Was möchten Sie als nächstes tun?

Weiter einkaufen Zur Kasse

Mit CSS die Farbe eines Links ändern

CSS Link KlassenDie ersten Schritte, die ein Programmierer im Webdesign macht, beinhalten die Erstellung von Containern wie eine Tabelle, ein Div, die Befüllung mit Text und anschließend kommen die Verlinkungen. Selbstverständlich hat jedes HTML eine Standardfarbe und Gestaltung und Sie werden Ihre Linkfarben ändern wollen.

Sie haben die Möglichkeit die Linkfarbe entweder mit der Erstellung einer CSS Klasse oder direkt inline zu verändern. So geht das einfach mit HTML und CSS.

Lösung - Linkfarbe ändern mit einer CSS Klasse

Angenommen, wir haben folgenden HTML Text:

<p>Bissel Text mit einem <a>Link</a></p>

Dieser Text beinhaltet einen Link, der automatisch blau wird, wenn Sie keine eigene Klasse für diesen Link erstellen. Um das zu tun, müssen Sie folgende Schritte gehen:

  1. Sie erstellen eine CSS Klasse, am besten in einer CSS Datei, die Sie in jedem HTML Dokument referezieren.
  2. Sie referenzieren diese Klasse innerhalb Ihres Links in der HTML Quelle
  3. Sie laden die Seite neu - der Link hat Ihre Klasse übernommen und alle in der Klasse definierten Attribute wie Größe, Farbe, Schrift etc.

Nachfolgend zeigen wir Ihnen die tatsächlichen Schritte. Als erstes machen Sie eine Datei style.css, kopieren Sie diese in einen Ordner /css und referenzieren Sie diese in allen Seiten, am besten in Ihrer Header-datei, die Sie immer wieder inkludieren. So sieht die Referenzierung der Datei im HTML aus:

<link rel="stylesheet" href="/css/style.css"/>

Nun erstellen Sie eine Klasse für Ihren Link innerhalb der CSS Datei. Beachten Sie, dass Sie bei Links vier Klassen benötigen, um alle Stati des Links zu berücksichtigen - wenn der Link normal sichtbar ist, wenn er einmal angeklickt wurde, wenn der Link gerade geklickt wird und wenn Sie mit der Maus über den Link gehen:

a.MeineKlasse:link {color: #555;}
a.MeineKlasse:visited {color: #555;}
a.MeineKlasse:active {color: #555;}
a.MeineKlasse:hover {color: #aaa;}

Die obigen Zeilen definieren die Klasse MeineKlasse mit allen vier erwähnten Möglichkeiten. Ihre Linkfarbe wird dunkel grau aussehen und wenn Sie mit der Maus darauf gehen, so wird die Linkfarbe hellgrau. Nun müssen wir die Klasse in unserer HTML Programmierung referenzieren:

<p>Bissel Text mit einem <a class="MeineKlasse">Link</a></p>

Fertig! Bitte beachten Sie, dass Sie gar keine Fehler erhalten werden, falls Sie was falsch gemacht haben. Deswegen ist die Schreibweise von CSS ganz wichtig. Sie haben auch neben der Linkfarbe auch viele anderen CSS Attribute anzulegen, wie Sie auf dem Bild sehen.

Lösung 2 - Linkfarbe inline ändern

Falls Sie keine Zeit und Lust haben CSS Dateien anzulegen, so können Sie auf die Schnelle die Farbe eines Links verändern. Dies geschieht mit einen inline CSS Befehl - bedeutet Sie definieren die CSS Eigenschaft direkt bei der HTML Definition des Links:

Bissel Text mit einem Link

Inline CSS setzt man mit dem Attribut style. Somit können Sie eine ganze Range von CSS Attributen direkt ausschreiben. Jedoch ist es unmöglich auf diesem Wege die Farben für die verschiedenen Stati des Links zu definieren. Viel Erfolg!

CSS Validator

Für die Webdesigner, die gerne ihre CSS Klassen trotz der Abwesenheit von Fehlern prüfen wollen, gibt es den W3C CSS Validator.

û