CSS color für die Textfarbe

Hervorhebung durch Farben mit CSS

Man sollte mit Farben dezent umgehen, wenn man eine Webseite gestaltet, aber man sollte auch nicht gänzlich darauf verzichten. Besonders das Hervorheben von wichtigen Textstellen, ganz besonders aber von Links und ähnlichen weiterführenden Informationen kann man mit der Textfarbe sehr einfach und effizient gestalten.

Die Farbe ist schon seit jeher auf Webseiten ein Thema, sei es die Farbe des gesamten Artikels oder auch die gewählten Farben bei den Links, doch war es zu Beginn mühsam, auf jeder HTML-Seite Änderungen vorzunehmen. Mit dem zentralen CSS-Dokument kann man hingegen sehr einfach geänderte Farbkonzepte umsetzen und zuständig für die Textfarbe ist der Befehl color.

Mit CSS und color die Textfarbe ändern

Eingesetzt wird der Befehl in folgender Weise:

color: red;
color: #990000;

Im ersten Beispiel wird eine Stammfarbe namentlich genannt und das reicht aus, um CSS mitzuteilen, in welcher Farbe der nachfolgende Text gestaltet und dargestellt sein soll. Das zweite Beispiel gibt den Farbcode bekannt, mit dem CSS arbeiten soll.

ergibt:

color: red;

color: #0000ff;

color: #999999;

Mit einfachsten Mitteln ist es also möglich den Text zu verändern. Man wird wohl dezent bei der Hauptinformation vorgehen, weil sich längst herausgestellt hatte, dass weißer Hintergrund und schwarze Schrift der stärkste Kontrast ist und einfach für längere Texte am besten geeignet bleibt. Aber bei Überschriften, bei der Linkfarbe oder auch bei zusätzlichen Informationen vielleicht sogar mit eigenen Boxen kann man sich herumspielen. Das Duo Textfarbe und Hintergrundfarbe kommt dann auch öfter zum Einsatz und man erzielt schöne Effekte, ohne es zu übertreiben.

Übertreiben ist auch das Stichwort bei Farben, denn wenn man zu viele Farben auf der Seite einsetzt, weiß das menschliche Auge nicht mehr, worauf man den Fokus richten soll und das ist dann kontraproduktiv.

Lesen Sie auch

Die Textformatierung ist bei CSS neben der Positionierung eine Hauptaufgabe, weil gefälliger Text einfach eher angenommen wird und einen Mehrwert darstellt. Man darf es nicht übertreiben, aber man kann sich damit sich auch einmal spielen und ein wenig die Reaktionen überprüfen. Wichtig ist einmal die grundsätzliche Einstellung der Schriftart und Schriftgröße.

Dann kommen Befehle, die sehr häufig benötigt werden. Dazu gehört font-weight für die Fettschrift, alternativ und nicht so häufig wird man font-style für kursiv nutzen. Sehr oft braucht man color für die Textfarbe und text-decoration speziell bei der Gestaltung und Auszeichnung der Links.

Und dann gibt es noch weitere Einstellungen wie den Abstand von Buchstaben und Wörter, den Schatten oder auch die Textumwandlung und die Schriftvariante.

Diesen Artikel teilen

Kategorien

Grundlagen
HTML-Grundlagen
CSS-Grundlagen
Javascript-Grundlagen
PHP-Grundlagen
MySQL-Grundlagen
SEO-Grundlagen

Infos, Tipps, Vermarktung
Webdesign-Lexikon
Online-Werbung
PHP-Codeschnipsel