Wie Sie vielleicht schon beim Betrachten der Beispiele auf den vorhergehenden Seiten gesehen haben, werden Styles angegeben als Paare property: value (Eigenschaft: Wert), die durch Strichpunkte getrennt sind. Jeder Wert kann durch Anführungszeichen umgeben sein und Werte aus mehreren Wörtern wie "Trebuchet MS" sollten es immer sein; daran sollten Sie besonders dann denken, wenn Sie einen HTML-Editor verwenden, um Eigenschaften und Werte automatisch einzusetzen, da viele die Anführungszeichen weglassen.

Inline Styles

Bei inline styles wird die Textkette aus den Paaren property: value in Anführungszeichen eingeschlossen und als Wert für das Attribut style gesetzt:

<li style="font-size: 10pt; font-weight: bold">

Linked und Embedded Styles

Bei linked style sheets oder embedded style tags werden die Style-Angaben für verschiedene selectors (jedes HTML-Element kann ein Selector sein) gesetzt. In diesem Fall sind die Paare property: value der Style-Definition in spitzen Klammern (braces) eingeschlossen, die nach dem Selector stehen:

H2
{
font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
font-weight: bold;
font-size: x-large;
color: #660066;
}

Beachten Sie, daß für den Fall, daß einer der Werte aus mehreren Wörtern besteht (wie im Fall der Werte für font-family im obigen Beispiel) jeder Wert in der Liste für diese Eigenschaft von Anführungszeichen umgeben sein sollte.

Erinnern Sie sich auch daran, daß Sie mehrere Klassen (aber nur eine Ebene tief) für einen Selector angeben können, um die Styleangaben zu variieren, wie wir es bei der Erklärung von Vererbung sahen.

Styles im Kontext

Schließlich sollten Sie auch wissen, daß sie contextual Styles erstellen können, indem Sie zwei Selectors kombinieren:

P STRONG { color: #FF0000 }

Dieser Style würde nur Text betreffen, der innerhalb eines STRONG Elements steht und dieses wiederum in einem PARAGRAPH Element. Wenn Sie möchten, daß mit STRONG ausgezeichneter Text vom Kontext unabhängig immer gleich aussieht, dann erstellen Sie einfach ein simples Style mit STRONG als Selector:

STRONG { color: #FF0000 }

In beiden Fällen müssen Sie wissen, daß jede andere Styleangabe für das Element, in dem der Text mit Auzeichnung STRONG auftaucht, wirksam bleibt, solange die Styleangabe für STRONG diese nicht explizit überschreibt.

Bernhard Friedrich

doozer@hsguide.com