CSS - Formatierung von Html Text

Der veraltete Font Tag mit seinen verschiedenen Attributen sollte in heutigen Webseiten nicht mehr angewendet werden. Css bietet gute Möglichkeiten zur Formatierung von Text und auch die unterschiedlichen Browser geben die meisten Angaben wie gewünscht auf dem Bildschirm aus. Um schnelle Layoutwechsel durchzuführen und Barrierefreiheit zu gewährleisten ist eine Formatierung mit CSS unverzichtbar. Ensprechend ihrer Semantik ausgezeichnete Texte lassen sich, mit Hilfe von CSS-Formatierung, gut in jedes Layout integrieren. Die folgenden Beispiele können direkt in ein Stylesheet oder den Headbereich der Html-Seite kopiert werden.

Font size

Mit dem Attribut font-size, dem anschließend ein Wert zugewiesen wird, definieren Sie die Schriftgröße. In unserem Beispiel wird die Größe der Überschrift mittlerer Ordung festgelegt. Dabei sind verschiedene Einheiten wie em, px, oder pt erlaubt. Zu empfehlen ist die Angabe in em.

Beispiele:
h4 {font-size: 0.9em; } oder
h4 {font-size: 12px; } oder
h4 {font-size: 11pt; }

Font family

Mit Hilfe des Attributes font-family, wird die Schriftart angegeben, in welcher die Webseite auf dem Monitor angezeigt werden soll. Im folgenden Beispiel wird allen Absätzen, die mit dieser Styleangabe verknüpft sind, die Schriftart bangle zugewiesen.

Beispiel:
p {font-family:bangle;}

Da diese Schriftart aber nicht unbedingt auf jedem PC und schon gar nicht auf jedem Mac vorhanden ist, empfielt es sich, alternativ eine oder mehrere Schriftarten zu definieren.

Beispiel:
p {font-family:bangle, arial, helvetica;}
In diesem Beispiel wurden, zur zu bevorzugenden Schriftart "bangle", die alternative Schriftart "arial", die auf dem meisten PC's vorhanden ist, sowie die Schriftart "helvetica", die auf den meisten Mac-Systemen anzutreffen ist, definiert.

Font weight

Die Angabe font-weight legt die Dicke der Schrift fest. Dabei sind Werte von 100 bis 900, die in ganzen Hundertern angegeben werden, möglich. Aber auch Angaben wie normal, bold, bolder oder lighter können verwendet werden. In den folgenden Beispielen steht der Wert 500 für medium oder normal und bolder für extrafett. Nicht in allen Schriftarten können alle Schriftdicken dargestellt werden. Angezeigt wird dann was der Angabe im Stylesheet am nächsten kommt.

Beispiel:
p {font-weight:500; }
p {font-weight:bolder; }

Color

Mit dem Attribut color wird die Schriftfarbe festgelegt. Im Beispiel werden die Absätze mit einer weißen Schriftfarbe definiert.

Beispiel:
p {color:#FFFFFF; }

Background Color

Passend zur Schriftfarbe sollten Sie eine Farbe für die Darstellung des Hintergrundes wählen.

Beispiel:
p {background-color:#FF0000;}

Attribute in einer CSS-Style-Angabe zusammenfassen

Die vorangegangenen Beispiele müssen nun nicht alle separat angegeben werden sondern können in einer Klasse zusammengefasst werden. In unserem Beispiel wird die Klasse "text" mit den Attributen aus den vorangegangenen Beispielen angelegt. Text mit Schriftgröße 0.9em, in der Schriftart bangle mit alternativen Schriftarten arial und helvetica, in einer normalen Dicke von 500, wird in weiß auf rotem Hintergrund dargestellt.

Beispiel:
.text {font-size: 0.9em; font-family:bangle, arial, helvetica; font-weight:500; color:#FFFFFF; background-color:#FF0000;}