CSS beruht auf dem Prinzip der Vererbung oder Überlagerung (Cascading) von Informationen. Wird also eine Definition für
den Tag <body> vorgenommen, so gilt diese Angabe für das gesamte HTML-Dokument. Sollen einzelne Tags dann davon
abweichende Parameter übergeben bekommen, so werden diese zusätzliche angegeben.
Zur Zeit funktioniert dies allerdings erst in wenigen Browsern: genauer gesagt im Microsoft IE5 und in Opera. Bei Netscape müssen
leider die Tags noch alle einzeln definiert werden (Version 4.5).
CSS ist nicht HTML, daher gilt für CSS eine andere Syntax als für HTML. Layoutanweisungen werden in geschweiften Klammern übergeben, also z.B.:
<!-- body {font-family: Arial, Verdana, Sans-serif; text-align:left} -->Die einzelnen Befehle werden wie aus Programmiersprachen bekannt, per Strichpunkt/Semikolon übergeben. Werden, wie im oberen Beispiel verschiedene Parameter übergeben, so sucht der Browser, bis er den in diesem Fall richtigen Font gefunden hat. CSS-Anweisungen stehen oft in HTML-Kommentarzeichen: alle Browser, die CSS interpretieren können, überlesen die Kommentare in diesem Fall, für die Browser der älteren Generationen gilt: sie lesen die CSS-Anweisung wie einen Kommentar und überlesen sie damit. Kommentare in CSS werden mit folgender Syntax ausgezeichnet:
/* Kommentar in CSS */
Da HTML nur eine begrenzte Zahl von Tags bereithält, muß es möglich sein, die Tags um bestimmte Layoutinformationen erweitern zu können. Dafür wurde das Attribut "class" in HTML definiert. Es kann einzelen Tags übergeben werden und ermöglicht so für ein und dasselbe Tag verschiedene Darstellungen fetszulegen:
Beispiel Definition in CSS: P.rot {color:red} P.blau {color:blue} Übergabe in HTML: <P class="rot"> Dieser Text ist rot </P> <P class="blau"> Dieser Text ist blau </P>Neben der Definition von Klassen für einzelne Tags können auch allgemeine Klassen definiert werden, die für alle Tags anwendbar sind:
.rot {color:red} in HTML: <P class="rot"> Dieser Text ist rot </P> <em class="rot"> Dieser ebenfalls </em>
Mit dem @-Zeichen können verschiedene Layoutparameter für verschiedene Ausgabeformen definiert werden. Steht z.B. im Stylesheet:
@media print {IMG {display:none} }so wird damit festgelegt, daß beim Ausdruck alle Grafiken und Bilder nicht gedruckt werden sollen.