Die spezielle Syntax der Style Sheets

Leider (nein notwendigerweise) arbeitet CSS mit einer Syntax, die sich von der HTML-Syntax deutlich unterscheidet. Lernbedarf besteht insofern, als die Mehrheit der Attribut- bzw. Eigenschaftnamen verändert ist. Ein guter Grund ist auch, daß eine große Zahl neuer Formatierungsmöglichkeiten hinzu gekommen ist. Erlernen wird man CSS anhand von Beispielen. Vorab nur ein paar wichtige Unterschiede:

Gegenüberstellung syntaktischer Elemente in HTML und CSS
Funktion	HTML, XHTML	CSS
Zuweisung	=	:
Formatierungsangabe	Tags erhalten Attributzuweisung innerhalb ihrer Klammern. Ein Beispiel für HTML: `<FONT COLOR="red" SIZE="+2">Test</FONT>` Erfolg: Test Bei XHTML wird das Attribut "font" nicht mehr akzeptiert.	1. Innerhalb eines <STYLE>-Tags werden ungeklammerte Tag-Bezeichnungen mit Attributen in CSS-Schreibung in geschweiften Klammern versehen. Der Browser muß allerdings gesagt bekommen, welche Art von Style-Angaben folgt: `<STYLE TYPE="text/css">SPAN{color:red;font-size:1.5em}</STYLE> ... <SPAN>Test 1</SPAN>` Erfolg: Test 1 mit dem nicht unerheblichen Nachteil, daß das SPAN-Tag damit für die Seite festgelegt ist, also nicht mehr ohne besondere Maßnahmen anderweitig verwendbar. 2. Das Universalattribut "STYLE" in HTML verlangt die CSS-Syntax bei den Werte-Angaben und kommt ohne Klammer aus. `<SPAN STYLE="color:blue;font-size:15pt">Test 2</STYLE>` Erfolg: Test 2 3. In XHTML würde man anders vorgehen, im Kopf oder extern stünde eine Klassendefinition, die das Tag nicht "verbraucht" und mit allen Schrift-Tags verwendbar wäre etwa Im head-Bereich steht: `<style type="text/css"> span{color:red;font-size:1.5em} .anmerkungsblock{color:#48D724;font-size:1.5em} </style>` Der Aufruf erfolgt mit `<span class="anmerkungsblock">Test 3</span>` Erfolg: Test 3
Schluß- bzw. Trennzeichen	Leerzeichen trennt Attribute Beispiel: `<TABLE BORDER="0">` `<TR>` `<TD>` `<FONT COLOR="red" POINT-SIZE="18"> Zellinhalt </FONT>` `</TD>` `</TR>` `</TABLE>` Schriftattribute gelten nur für diese Zelle	Semikolon beendet und trennt Attributeinträge innerhalb der "{...}"- Klammern, Leerzeichen galten ursprünglich als schädlich, das ist nicht mehr so! Komma trennt unterschiedliche Tagnamen, wenn sie gleiche Merkmale erhalten, Leerzeichen trennen aufeinander folgende style-Definitionen Beispiel: `<STYLE TYPE="text/css"> TABLE,DIV{border:6;border-style:double} TD,SPAN{color:red;font-size:14pt} </STYLE> ... <TABLE>` `<TR>` `<TD> Zellinhalt </TD>` `</TR>` `</TABLE>` Table-Anlage vereinfacht sich, Schriftattribute gelten für alle Tabellenzellen bzw. für die Schriftart "feste Breite". Das Beispiel ist hier nicht ausgeführt, da es alle Tabellen der Seite verändern würde.
Kommentare	`<!-- Kommentar in HTML -->`	Kommentar in CSS: `/* Bitte so stehen lassen! */`

Wer sich auf "Style(s)" einläßt, bemerkt rasch, daß der Umgang damit, zumindest am Anfang, etwa so übersichtlich ist, wie der mit dem Internet (= Suche nach einer Nadel im Misthaufen, welche nie drin war ...). Deshalb noch vor allen Einzelheiten der Versuch einer Differenzierung (Wenn mir dabei Fehler unterlaufen, mögen mir alle Internet-Götter verzeihen, oder mich eines/vieles Besseren belehren: Hier geht's zu mir!)

Was alles kan 'STYLE' bzw. 'style' bedeuten?

"STYLE" bzw. "style" ist ein Attribut in HTML und/oder XHTML, das bei fast allen Tags verwendet werden kann. Man zählt es zu den Universalattributen. Es bezieht sich auf das jeweilige Tag und ermöglicht es, eine Tag-Formatierung im Einzelfall mit den Formatiermöglichkeiten der Style-Sheets vorzunehmen. Ein Aufruf in HTML könnte lauten:
<SPAN STYLE="color:#00ff00; font-size: 36pt"> und ergibt: Test 1 mit dem häßlichen Abstand über der neuen Zeile, weil sich mit der Schriftgröße auch der Zeilenabstand vergrößert.

Was sich allerdings mühelos unterbinden läßt mit etwa: <SPAN STYLE=" color: #00ff00; font: 36pt/50% sans-serif">Test 2

Um Style-Sheet-Bereiche zu definieren ("lokale Definition"), gibt es seit HTML zwei spezielle Tags: DIV und SPAN, denen dann mit dem Attribut STYLE Formatierungsanweisungen zugewiesen werden können. Der Aufruf lautete dann etwa:
<SPAN STYLE="font-style:italic;color:blue"> Ich bin blau und stehe schief! </SPAN>
In XHTML werden diese beiden, diesmal als div und span, auch gern genutzt, jedoch ist die Philosophie eine andere...

"STYLE" ist ein normales HTML-Tag mit der Aufgabe, Bereiche für Style-Sheet-Angaben zu definieren. Dabei ist die Angabe des Style-Typs erforderlich. Der Aufruf, vorzugsweise aber nicht notwendig im <HEAD>-Teil des Dokuments, erfolgt in der Form:
<STYLE TYPE="text/css"> style_sheet_angaben </STYLE>
Für die Style-Sheet-Angaben gilt die in der Tabelle beschriebene Syntax.

"style" ist ein Objekt in der JavaScript-Erweiterung von Microsoft. Es ist Unterobjekt von "all"; wird mit
all.html_element.style.eigenschaft=wert oder all.html_element.style.funktion()
aufgerufen, wobei html_element hier für den Namen eines (fast) beliebigen Tags steht. Wegen dieser speziellen Art des Aufrufes kann man dieses "style" kaum mit den anderen verwechseln. Natürlich geht es bei diesem style auch um Styles im allgemeinen Sinne. Man kann damit Style-Sheet-Werte für das benannte HTML-Element erfragen, sie ändern oder löschen.

Beispiel

Der wichtigste Fall ist, solange man sich mit dem Code allein auf der Webseite bewegt, der vorletzte. Während bei den ersten drei Fällen nur die Eigenschaftsnamen und die syntaktischen Regeln der Style-Sheets verwendet werden, kommt es erst bei der kompletten Definition von Style-Sheets zur Verwendung der speziellen Schreibweise: Tag-Bezeichner, ggf. mehrere mit Komma getrennt, in geschweiften Klammern alle Attribut-Bezeichner, denen mit Doppelpunkt Werte zugewiesen werden. Attributzuweisungen werden mit Semikolon voneinander getrennt. Klingt komplizierter als es dann aussieht. Zeilen wie diese:

body{color:#663366;background-color:#f0ffff}
tt{font-type:tt;font-size:11pt;color:green}
table{color:#991133;background-color:#e0e0e0}

</style>

könnten etwa im head-Teil dieser Seite stehen. Zu den Einträgen gilt im Einzelnen:

type="text/css" ist der MIME-Typ, der die Befehlssyntax der Style-Sheets definiert
Es folgen die einzelnen Sheets, also hier eines für body{} für die Eigenschaften des Dokuments, eines für tt{} wie nichtproportionale Schrift (typewriter) und eine für table{} mit speziellen Eigenschaften für die Tabellen. Davon könnten noch mehr folgen.
Die Attribute heißen teilweise anders als in HTML.
Die Wertzuweisungen erfolgen mit Doppelpunkt und funktionieren, soweit bekannte Schlüsselwörter folgen, auch für Strings ohne Anführungszeichen. Ein Ausnahme bilden Namen von Schriften, wenn sie ein Leerzeichen enthalten (Beispiel: " Times New Roman"):

Ein wenig von den "philosophischen" Grundlagen zu CSS ist wohl doch nötig, deshalb hier eine kurze Übersicht, zu jedem Eigenschaftswert gibt es eine Gruppe zugehöriger Angaben (siehe Tabelle), die man nicht in jedem Falle kennen muß. Oft hilft zum Glück die Intuition, sonst käme man aus dem Nachschauen nicht heraus.

Eigenschaftsdefinitionen in CSS
Eigenschaften von "Eigenschaften"	Erklärung	Beispiel
Wert (Value)	Mögliche Werte, Schlüsselworte oder Zahlwerte; sind jeweils in den folgenden Übersichten angegeben	border-style: double; border-width: 3px;
Anfangswert (Initial)		text-indent: Anfagswert ist 0.
Anwendbar auf (Applies to)	Diejenigen Seitenelemente, für die eine spezielle Eigenschaft festgelegt bzw. verändert werden kann	color: anwendbar auf alle Elemente text-align: anwendbar auf Block-Level-Elemente
Vererbung (Inherited)	Gibt an, ob der Eigenschaftswert vom übergeordneten Seitenelement geerbt wird oder nicht. Letzteres passiert, wenn ein oder mehrere Vorgänger die fragliche Eigenschaft selber nicht besitzen.
Prozent (Percentages)	Ob und wie Prozentangaben berücksichtigt werden	text-align: keine Berücksichtigung text-indent: Bezieht sich auf Breite des enthaltenden Blocks
Medium (Media)	Anwendbarkeit für Mediengruppen: aural, visual, tactile. An speziellen Typen sind vorgesehen: all, aural, braille, embossed, handheld, print, projection, screen, tty, tv.

CSS ist mittlerweile sehr komplex. Es gibt eine Reihe syntaktischer Eigenheiten, die sich in der von mir gewählten Gliederung schwer unterbringen lassen. Damit jeder mal davon gehört hat, folgt hier eine sammlung derjenigen Befehle, die man nicht unbedingt braucht, die aber gelegentlich genau das bewirken, was man sich so vorgestellt hat. Kann sein, daß einige dieser Einträge später an anderer Stelle des Kurses ihren Platz finden.

Spezielle syntaktische Eigenheiten
Eigenschaften von "Eigenschaften"	Erklärung	Beispiel
inherit	Universelle Eigenschaft, die den geerbten Eigenschaftswert von Seitenelementen "stärkt", d.h. ihn gegen anderweitige Festlegung schützt. Wie weit dieser Schutz geht, ist etwas unklar.	Wenn man gar nichts tut, erbt man, ohne recht zu wissen, woher.
!important	Eine universell vergebbare Eigenschaft, die eine Vorschrift verstärkt. Wie weit diese Verstärkung bei Konflikten zwischen Seitenautor, Browser (user Agent) und User geht, ist eine Wissenschaft für sich.	Test
Prozent (Percentages)	Ob und wie Prozentangaben berücksichtigt werden ist natürlich streng geregelt, ob die Browser dem folgen, ist offen.	text-align: keine Berücksichtigung text-indent: Bezieht sich auf Breite des enthaltenden Blocks

Wenn jemand beim Studium dieser Seite merkt, daß ich beim Code etwas geschummelt habe: Die Seite ist in XHTML geschrieben, deshalb sind die HTML-Beispiele nicht ausführ- bzw. zertifizierbar. Ich leide selbst am meisten daran!