Regel-Liste

Erklärung:
Verändert die Schriftgröße.

Werte:
Natürlich unterstützt nicht jede Schriftart alle Schriftgrößen, aber es stimmt ungefähr. Sie können eine beliebige Zahl plus Größenangabe.

Beispiel:

P {
  font-size: 10pt;
}

Erklärung:
Verändert die Höhe der Zeile.

Werte:
Zahl plus Größenangabe

Beispiel:

P {
  font-size: 13px;
  line-height: 130%;
}

Zu beachten:
Angenehm fürīs Auge ist etwas mehr als die Schriftgröße (130% ist ein guter Wert). Natürlich lassen sich damit auch nette Effekte erziehlen, wenn man einem mehrzeiligen Text (z. B.: einem <p>-Absatz) eine line-height gibt, die kleiner als die Schriftgröße ist.

Erklärung:
Hier wird deklariert, welche Schriftarten der Browser für das HTML-Tag verwendet. Findet der Browser die Schriftart nicht, die an erster Stelle steht sucht er nach der Zweiten. Sollte er auch diese Schriftart nicht auf der Festplatte des Users finden nimmt er die dritte. Anschließend greift er zur Default, also Standard-Schriftart. Sie können natürlich auch mehr als drei Schriftarten angeben, aber drei hat sich eingebürgert.

Werte:
Jede nur erdenkliche Schriftart. Achten Sie nur darauf, einen Font anzugeben den der der Besucher Ihrer Seite bestimmt besitzt.

Beispiel:

P, H1 {
      font-family: Verdana, Arial, sans-serif;
}

Erklärung:
Verändert die Dicke der Schrift.

Werte:
Am häufigsten wird hier die Variable "bold" benutzt. Weil man es am häufigsten braucht, und weil es die einzige Variable ist, die von fast allen Schriftarten unterstützt wird. Es gibt aber nocht mehr:
lighter (dünn), bold (dick), bolder (dicker) und 100, 200, 300, 400, 500, 600, 700, 800 und 900 (100 ist am dünnsten und 900 am dicksten).

Beispiel:

P {
  font-weight: bold;
}

Zu beachten:
Beachten Sie bitte, dass das <b>-Tag dieselbe Wirkung hat (bis auf die unterschiedlichen Dicken). Deshalb ist es nicht sehr ratsam eine Klasse "dick" anzulegen. Netscape 4.x hat Probleme mit bolder und schreibt den Text dann normal und nicht einmal dick.

Erklärung:
Formatiert den Text.

Werte:

• italic stellt den Text kursiv dar.
• oblique stellt den Text schief bzw. schräg dar.
• Als letztes ist noch normal, welches den Text eben normal darstellt.

Beispiel:

P {
  font-style: oblique;
}

Zu beachten:
Nicht alles funktioniert bei jeder Schriftart.

Erklärung:
Kurzschreibweise für alle auf dieser Seite erklärten font-Elemente.

Werte:
Alle bisher vorgestellten.

• 13px/130%: Schriftgröße und Zeilenhöhe: font-size/ line-height
• Verdana, Tahoma, sans-serif: Schriftart font-family
• bold: Schriftdicke font-weight
• italic: formatiert den Text font-style

Beispiel:

P {
  font: 13px/130% Verdana, Tahoma, sans-serif bold;
}

Zu beachten:
Auf keinen Fall sollten Sie schreiben font: 13px/130%; sonder immer auch die Schriftarten, wie im Beispiel oben, mit angeben. Ansonsten ignorieren Netscape 4.7x und IE6 das komplette Tag, was dem Standard entspricht. Netscape 4.7x ignoriert allerdings auch alle sonstigen Anweisung die noch direkt darauf folgen.

Erklärung:
Verändert den Abstand der Buchstaben in einem Wort zueinander.

Werte:
Beliebige Zahl plus Größenangabe. em bietet sich hier an.

Beispiel:

H1 {
   letter-spacing: 0.3em;
}

Zu beachten:
Diese Eigenschaft eignet sich besonders um Überschriften hervorzuheben.

Erklärung:
Hebt den Text durch folgende Formatierungen hervor:

Werte:

• underline: Unterstrichen
• overline: Linie über dem Text
• line-through: Durchgestrichen
• none: gar nichts (wichtig bei Links)

Beispiel:

P {
  text-decoration: underline;
}

Erklärung:
Rückt die erste Zeile eines Abschnittes ein.

Werte:
Beliebige Zahl plus Größenangabe. em bietet sich auch hier an.

Beispiel:

P {
  text-indent: 3em;
}

Zu beachten:
Am besten eignet sich das Tag unbestritten für mehrzeilige Absätze. Also <p>

Erklärung:
Bestimmt die Ausrichtung des Textes.

Werte:

• left: Voreinstellung und bedeutet, dass der Text linksbündig dargestellt wird.
• justify: Der Text wird als Blocksatz (wird häufig in Zeitschriften verwendet, zum Beispiel Cīt, Die Welt oder FHM) dargestellt. Es dehnt den Text also so aus, dass er links und rechts anstößt. Dadurch entstehen dann die etwas größeren Leerräume zwischen den Wörtern.
• right: Der Text wird an den rechten Rand geklebt.
• center: Stellt den Text in die Mitte, so dass rechts und links gleich große Abstände entstehen.

Beispiel:

P {
  text-align: justify;
}

Erklärung:
Bestimmt die Ausrichtung des Textes.

Werte:

• left: Voreinstellung und bedeutet, dass der Text linksbündig dargestellt wird.
• justify: Der Text wird als Blocksatz (wird häufig in Zeitschriften verwendet, zum Beispiel Cīt, Die Welt oder FHM) dargestellt. Es dehnt den Text also so aus, dass er links und rechts anstößt. Dadurch entstehen dann die etwas größeren Leerräume zwischen den Wörtern.
• right: Der Text wird an den rechten Rand geklebt.
• center: Stellt den Text in die Mitte, so dass rechts und links gleich große Abstände entstehen.

Beispiel:

P {
  text-align: justify;
}