Mit CSS ist es ohne Probleme möglich, jede Art von Schrift- und Absatzformatierung umzusetzen.
Die Eigenschaften können grundsätzlich auf alle Elemente angewendet werden, die Text beinhalten, also auch auf Listen, Formulare, Tabellen, …
Die Schriftart wird mit der Eigenschaft font-family: festgelegt, diese nimmt als Wert sowohl eindeutige Schriftarten (z.B. verdana) als auch Schriftfamilien (z.B. serif) an. Eine Schriftfamilie beinhaltet mehrere Schriftarten, von der der Browser die 1. beim Benutzer verfügbare auswählt. Man kann (und i.d.R. tut man das auch) auch mehrere Schriftarten bzw. -familien angeben. Der Browser nimmt dann standardmäßig die 1., wenn die Schriftart nicht installiert ist die 2., usw.
Beispiel: font-family: Verdana, Arial, sans-serif;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <title>Generische Schriftarten</title> </head> <body> <p style="font-family: sans-serif">sans-serif</p> <p style="font-family: serif">serif</p> <p style="font-family: cursive">cursive</p> <p style="font-family: fantasy">fantasy</p> <p style="font-family: monospace">monospace</p> </body> </html>
Zuerst definitert man mit font-face eine eigene Schriftart, die man aus der Schriftdatei lädt. Diese Schriftart kann man dann anwenden.
@font-face { font-family: Raleway; /* Dieser Name ist beliebig */ src: url(Raleway-Thin.ttf); }
<p style="font-family: Raleway">Raleway</p> /* hier muss der Wert von font-family bei der font-face-Deklarierung verwenet werden! */
Die Schriftfarbe eines Elements wird (wie die Farbe aller Elemente) mit der CSS-Eigenschaften color: festgelegt.
Mögliche Werte sind wie bei HTML HEX-Codes (mit führender #) oder Farbnamen (green, darkgreen, …)
Die Schriftgröße eines Elements wird mit der CSS-Eigenschaften font-size: festgelegt.
Diese Eigenschaft nimmt als Wert (wie alle Größen-/Längeneinheiten in CSS) verschiedene Einheiten an, z.B. px, em, cm, % → mehr Informationen zu diesen Einheiten.
| Eigenschaft | wichtige Werte | Erklärung |
|---|---|---|
| font-style | italic, normal | Bestimmt die Darstellung der Schrift, im wesentlich kursiv oder normal |
| font-weight | bold, normal | Legt die „Schriftgewichtung“ fest |
| text-align | left, right, center, justify | Ausrichtung des Textes |
| text-decoration | underline, overline, line-through, blink, none | Ermöglicht Unter/Durch/Überstreichungen und blinkenden Text |
| text-shadow | Farbe, 3x Länge | Informationen s. hier |
| word-spacing | Längenangabe | Abstand zwischen den Wörtnern |
| letter-spacing | Längenangabe | Abstand zwischen den Buchstaben/Zeichen |
Weitere Informationen zu diesen und weiteren CSS-Eigenschaften und den anwendbaren Werten gibt es unter http://www.css4you.de/Schrifteigenschaften/fontproperty.html (Schrifteigenschaften) und unter http://www.css4you.de/Texteigenschaften/textproperty.html (Texteigenschaften).