CSS: weg mit dem <font>-Tag
So, jetzt haben wir uns eine HTML-Datei vorgenommen und den Inhalt logisch strukturiert. Sogar so eine komische DOCTYPE-Definition [1] haben wir eingefügt. Und jetzt kann der Spaß losgehen!
Vorbereitung
Als erstes möchte ich gegen das font-Tag vorgehen und das geht am einfachsten, indem wir mit den entsprechende CSS-Werkzeugen arbeiten.
Aber damit unseren schönen CSS-Definitionen auch angewendet werden, muss in der HTML-Datei natürlich ein Hinweis darauf stehen. Am einfachsten geht das durch das <style>-Tag, das im header steht. Also:
<doctype :-) ...>
<html>
<head>
...
<style type="text/css"> <!--
--> </style>
</head>
<body>
...
Der style-Bereich sollte in Kommentarzeichen stehen, damit ältere Browser es nicht versehentlich unser sorgsam erstelltes CSS als einfachen Text sehen. In diesem <style>-Bereich landen jetzt zentral für die gesamte HTML-Datei alle CSS-Angaben. Wir müssen also nicht mehr jeden Absatz einzeln ändern, sondern können Verbesserungen einfach und schnell vornehmen. Und ja, genau deshalb ist logisch strukturiertes HTML wichtig.
weg mit dem font-Tag!
Was macht das font-Tag eigentlich so toll? Ganz einfach: wir können ohne Probleme die Schriftart (eigentlich: Schriftfamilie), die Schriftgröße und die Schriftfarbe unseren Wünschen anpassen. CSS kann das natürlich auch, aber es kann noch sehr viel mehr. Doch immer einen Schritt nach dem anderen.
Schriftart bzw. Schriftfamilie
Die Schriftart eines Absatzes kann mit p { font-familiy:Arial; } als Arial definiert werden. Wenn auf dem System eine solche Schriftfamilie vorhanden ist, wird der Text damit dargestellt. Und wenn nicht? In diesem Fall wird die Standardschriftart des Systems verwendet. Um diesen vielleicht unpassenden Effekt zu verhindern, kann man entweder mehrere Schriftfamilien angeben p { font-family:Arial,Helvetica; } oder aber eine generische Schriftfamilie als letzte Möglichkeit wählen. So ist sichergestellt, dass wenigstens die Idee richtig umgesetzt wird. In CSS gibt es fünf verschiedene Gruppierungen, die als letzte Rettung dienen können und sollen:
- serif = eine Schriftart mit Serifen, z.B. Times
- sans-serif = eine Schriftart ohne Serifen, z.B. Helvetica bzw. Arial
- cursive = eine Schriftart für Schreibschrift,
- fantasy = eine Schriftart für ungewöhnliche Schrift,
- monospace = eine Schriftart mit dicktengleichen Zeichen, z.B. Courier.
Eine Einführung zu Typographie und damit auch Näheres über Schriftfamilien, Schriftgruppen, Schriftarten und die Unterschiede gibt es bei [2]. Arial und Helvetica gehören in die Gruppe der serifenlosen Schriftfamilien, für mein hier gewähltes Beispiel wäre also sans-serif die richtige Wahl. p { font-family:Arial,Helvetica,sans-serif; }
Das schöne ist, dass jetzt alle Absätze diese Schriftart haben. Allein mit dieser kleinen Definitionsart können wir Überschriften, Absätzen Listen, Zitaten, eigentlich allen Elementen unserer HTML-Datei eine eigene Schriftart zuweisen. Möglich ist also h1 { font-family:sans-serif; }
h2 { font-family:sans-serif; }
h3 { font-family:sans-serif; }
p { font-family:serif; }
blockquote { font-family:monospace; }
Die Wiederholung von { font-family:sans-serif; } kann vermieden werden, indem man mehrere Elemente durch Komma getrennt vor der Klammer aufzählt. h1,h2,h3 { font-family:sans-serif; }
Schriftgröße
Die Schriftgröße ist die zweite Fähigkeit des font-Tag. CSS bietet uns hierfür viele verschiedene Maßeinheiten an, vom simplen Pixel, über Prozent, bishin zu Millimetern ist fast alles vertreten. Eine einfache Definition sieht (wieder für einen Absatz) so aus: p { font-size:16px; }
Pixel, in CSS durch die Maßeinheit px gekennzeichnet, sind eine absolute Einheit. Andere absolute Einheiten sind z. B. pt (Punkt, eine Typographische Maßeinheit) und cm (Zentimeter). Im Gegensatz zu absoluten Einheiten gibt es auch relative Einheiten wie em (Schriftgröße des Elements oder Elternelements) und % (Prozent). Praktisch anwenden kann man diese verschiedenen Maßeinheiten zum Beispiel so body { font-size:16px; }
h1 { font-size:1.5em; }
h2 { font-size:125%; }
h3,p { font-size:1em; }
blockquote { font-size:80%; }
Es ist leicht zu erraten, dass 1em 100% entspricht. In obigem Beispiel wurde einmal für den gesamten body-Bereich eine Schriftgröße festgelegt, alle andere Elemente richten sich dann danach. Wenn ich eine eine andere Schriftgröße ausprobieren will, muss ich nur für body die neue Größe eintragen, die Verhältnisse bleiben gleich. Weitere Informationen zur Maßeinheiten gibt es bei [2] und [3].
Schriftfarbe
Die dritte Eigenschaft des font-Elements ist die Textfarbe. Es ist nicht schwer zu erraten, dass CSS auch dafür wieder eine Lösung bietet. In CSS gibt es mehrere Möglichkeiten, Text z. B. rot darzustellen:
p { color:#ff0000; }
p { color:red; }
Genau wie in HTML kann man Farben in CSS als entweder über den RGB-Hexadezimal-Code angeben oder über einen Farbnamen. Ich persönlich bevorzuge die #RRGGBB-Schreibweise, da ich so alle Abstufungen exakt angeben kann. SelfHTML bietet auch dafür eine gute Übersicht an, die auch andere Möglichkeiten dazu enhält [4]. Die Farbnamen haben natürlich den Vorteil, dass sie leichter zu lesen sind. Allerdings sind die Farbnamen kein offizieller Bestandteil von HTML oder CSS, wer sich also an die Standards halten will, sollte auch von Farbnamen Abstand nehmen.
Ausblick
Für dieses Mal soll es das gewesen sein. Als Abschluss liste ich nochmal ein Bespiel für ein Stylesheet auf, das auch zeigt, wie man die Möglichkeiten kombinieren kann.
body { font-size:16px; }
h1 { font-size:1.5em; color:red; }
h2 { font-size:125%; color:blue; }
h3,p { font-size:1em; }
blockquote { font-size:80%; }
h1,h2,h3 { font-family:Arial,Helvetica,sans-serif; }
p { font-family:Times,serif; }
blockquote { font-family:"Courier New",Courier,monospace;
color:#000066; }
In der nächsten Ausgabe beantworte ich unter anderem die Frage, wie zur Hölle Hintergrundfarben definiert werden. Außerdem möchte ich euch noch ein paar HTML-Tags zeigen, die durch CSS überflüssig werden und dass Stylesheets weit mehr leisten als entsprechende HTML-Elemente.