CSS: Texte formatieren (Schriftart, Farbe, Schriftgröße)

Mit CSS, den Cascading Style Sheets, kann man Elemente einer Webseite anpassen – so lassen sich zum Beispiel Texte schnell und einfach formatieren und die Farbe des Textes, die Schriftgröße und die Schriftart ändern, um den Text nach eigenen Wünschen zu gestalten.

Farbe definieren

color:black;

<div style="color:black;">Beispieltext</div>

Fetter Text und andere Farbe

Statt schwarz kann man auch eine andere Farbe wählen – statt dem Farbwert als Text kann man die Farbe auch als 6-stelligen Hexadezimalwert angeben. Durch das Attribut “font-weight” kann man den Text auch fett darstellen lassen.

color:#FFFFFF;
font-weight:bold;

<div style="color:white;font-weight:bold;">Beispieltext</div>

Andere Schriftart:

Man kann zahlreiche verschiedenen Schriften nutzen, um den Text zu formatieren. Wenn man dabei keine Webfonts nutzt, die mit der Seite geladen werden, sollte man auf Scriften zurückgreifen, die auf allen Systemen vorhanden sind, damit der Browser keine alternative Schrift wählen muss.

color:black;
font-weight:bold;
font-family:arial;

<div style="color:black;font-weight:bold;font-family:arial;">Beispieltext</div>

Alternativ kann man statt der Serifenlosen Arial-schrift auf die klassisch wirkende Times wählen:

color:black;
font-weight:bold;
font-family:times;

Andere Schriftgröße

color:black;
font-size:23px;

<div style="color:black;font-size:23px;">Beispieltext</div>

CSS Befehle als Klasse definieren

Wenn die CSS Befehle für mehrere Elemente einer Webseite übernommen werden sollen, lassen sie sich auch einmal als CSS Klasse definieren und später den einzelnen Elementen zuweisen: Das spart nicht nur doppelte Zeichen, sondern ist auch einfacher, wenn Werte geändert werden sollen. Dazu bindet man entweder eine CSS Datei ein, in der man die Informationen kopiert, oder fügt in den <head&gt Bereich der Seite die gewünschten Style-Informationen ein, zum Beispiel so:

<style type="text/css">
#uhrzeit {
color:black;
font-weight:bold;
font-size:27px;
}

#datum {
color:black;
font-weight:normal;
font-size:15px;
}
</style>

Jetzt kann man einem Element die vorher definierte Klasse zuweisen:

<div class="datum"></div>
<div class="uhrzeit"></div>