Style Sheet Grundlagen 

Style Sheets sind Layoutvorlagen um elektronisch gespeicherte Dokumente zu formatieren. Derzeit unterstützen die meist verbreiteten Browser Style Sheets für HTML und XML Dateien. Im Prinzip wäre auch denkbar, dass andere Dokumenttypen Style Sheets zur Formatierung verwenden.
HTML Dokumente kommen im Prinzip auch ohne Layoutvorlagen aus, doch mit den beschränkten Möglichkeiten von HTML und vor allem mit der z.T. stark abweichenden Darstellung in verschiedenen Browsern will und muss sich heutzutage keiner mehr zufrieden geben. Die unterschiedliche Formatierung von HTML Elementen in den Browsern rührt einfach daher, dass die HTML Spezifikationen keine oder höchstens sehr allgemeine Vorschriften über die Darstellungsweise von Elementen machen. Da können natürlich divergierende Interpretationsweisen nicht ausbleiben.
Die Cascading Style Sheet Spezifikationen des W3C definieren dagegen eine Sprache, die ausschließlich zum Zweck der Formatierung von - ursprünglich - HTML Dokumenten entwickelt wurde. Da XML auf den gleichen Grundstandard wie HTML nämlich SGML zurückgeht, lässt sich die Cascading Style Sheet Sprache ohne prinzipielle Veränderungen auch auf XML Dokumente anwenden. Zur praktischen Umsetzung wurde lediglich eine Spezifikation geschaffen, um Style Sheets in XML einzubinden.

Ein Browser kombiniert bei der Ausgabe die Komponenten Inhalt (HTML bzw. XML Dokument) und Formatierungsvorschriften (Style Sheets) zu einem formatierten Dokument. Damit dies möglich wird, müssen Style Sheets in irgendeiner Form in die HTML bzw. XML Datei eingebunden werden. In HTML gibt es dafür zwei Varianten: Die eine Möglichkeit besteht darin, Style Sheets direkt in das Dokument einzubetten. Dazu wird das STYLE Element im Dokumentkopf (also innerhalb des Elements HEAD) eingetragen:

     <style type="text/css">
         <!-- hier stehen die Style Sheet Regeln -->
     </style>

Die andere Variante bindet eine externe Style Sheet Datei durch das Element LINK ein:

     <link rel="stylesheet" href="diag.css" type="text/css">

Zu beachten ist, dass das LINK Element nur im Dokumentkopf der HTML Datei erlaubt ist.
Die gleiche Variante ist in XML möglich. In diesem Fall muß folgende Zeile im Prolog, also vor dem ersten Element eingefügt werden:

     <?xml-stylesheet href="diag.css" type="text/css" ?>

Der Vollständigkeit halber sei noch erwähnt, dass HTML Elemente über das Attribut style individuell mit Style Eigenschaften versehen werden können. Damit gehen aber die Vorteile von Style Sheets weitgehend verloren, ja eigentlich widerspricht das dem Style Sheet Konzept. Von dieser Möglichkeit wird deshalb abgeraten.

Die Cascading Style Sheets definieren eine eigene Sprache mit einer speziellen Syntax. Innerhalb eines Style Sheet darf kein HTML bzw. XML Markup stehen. Leider sind in der Literatur immer wieder Beispiele abgedruckt, bei welchen in einer externen Datei abgelegte Style Sheets in das HTML Element STYLE eingebettet sind. Das ist ein Fehler, den die meisten Browser allerdings großzügig ignorieren.

Die Style Sheet Syntax ist im Prinzip recht simpel. Eine Style Sheet Regel ist im wesentlichen aus zwei Teilen aufgebaut. Der erste Teil nennt den Elementtyp und der daran anschließende Teil die Formatierungseigenschaft(en), die für diesen Elementtyp gelten sollen.

    H1 { color:red }

Im Beispiel wird der Browser angewiesen, alle H1 Elemente in der Farbe rot auszugeben (H1 ohne spitze Klammern!!).
Der erste Teil wird als Selektor bezeichnet, weil er die entsprechend zu formatierenden Elemente auswählt. Der zweite Teil wird als Deklaration bezeichnet. Eine Deklaration wird durch geschweifte Klammern umschlossen und listet ein oder mehrere Paare von Eigenschaften und den dazugehörigen Werten auf. Im Beispiel ist der Eigenschaft color der Wert red zugeordnet. Die Textfarbe soll also rot sein.
Es ist natürlich möglich, mehrere Eigenschaften in die Daklaration zu schreiben. Die Eigenschaft - Wert Paare müssen dabei durch ein Semikolon voneinander getrennt werden.
Der im Beispiel verwendete Selektor ist ein sehr einfacher. Es gibt eine Reihe von weiteren Selektortypen. Außerdem besteht die Möglichkeit, Selektoren auf bestimmte Art und Weise zu kombinieren. Im Style Sheet Syntax Quick Guide können sämtliche Selektoren und Eigenschaften nachgesehen werden.
Ein Style Sheet kann beliebig viele Style Regeln enthalten. Die verschiedenen Regeln schreibt man am besten einfach untereinander. Dazu ein Beispiel:

        SPAN { color:green; font-size:20px; font-weight:bold }
         DIV { background-color:yellow; text-align:center }
    P > ABBR { font-size:20px; font-style:italic }