Das Formatierungsmodell von CSS orientiert sich an einem einfachen Box-Modell. Hier ist die Herkunft aus dem HTML-Umfeld zu erkennen. Die HTML-Elemente lassen sich in zwei Gruppen einteilen, nämlich in solche, die einen abgesetzten Textblock darstellen — wie Überschriften, Listen, Absätze und so weiter —, und solche, die im Fließtext stehen, dazu zählen Hervorhebungen (EM, STRONG) und auch Links (A). Bei der Formatierung werden Textblöcke als Boxen behandelt, deren Aufbau die folgende Skizze zeigt.
Der Hintergrund von Inhalt und Polsterung stimmt überein und lässt sich mit der Eigenschaft background definieren. Für den Rahmen ist eine abweichende Darstellung möglich. Der Rand ist stets transparent, so dass die Farbe von umgebenden Boxen durchscheint.
Polsterung und Rand erlauben dem Verfasser eines Dokuments oder Stylesheets, den Abstand zwischen Text und Rahmen (die Polsterung) und zwischen dem Rahmen und angrenzenden Boxen (dem Rand) zu beeinflussen. Die Abstände lassen sich zu jeder Seite individuell bestimmen. Für die Breite gilt die Einschränkung, dass eine Box in der Breite exakt mit der umgebenden Box übereinstimmen muss. In der Praxis bedeutet das: Der Web-Browser ignoriert den Versuch, eine zu große Breite zu definieren. Ist die Breite zu klein, so wird der rechte Rand entsprechend aufgefüllt.
Innerhalb eines Blocks stehen Zeichenelemente. Bei der Verwendung von CSS mit XML ist eines zu beachten: Für HTML weiß der Browser bereits, welche Elemente Blöcke und welche Zeichenelemente sind. Für eine beliebige DTD muss man es ihm erst sagen. Etwa so:
absatz { display: block } befehl { display: inline }
Gleiches gilt für die anderen Eigenschaften von Elementtypen.
H1 { text-align: center }
Für die Darstellung benutzt ein Browser immer gewisse Vorgaben für die HTML-Elemente. Das obige Beispiele sagt nichts über Schriftgröße aus, dennoch stellt ein Web-Browser eine H1-Überschrift groß und fett dar. Ausgehend von solchen impliziten Vorgaben gibt ein Style Sheet nur noch Änderungen dieser Standardwerte an.
Bei Verwendung mit XML stellt sich nun das Problem, dass es sich um Elementtypen handelt, die dem Browser nicht bekannt sind (weil der DTD-Autor sie frei gewählt hat). Er kann also nicht mit Wertvorgaben arbeiten. Folglich müssen Style Sheets für XML etwas ausführlicher sein als die für HTML. Hilfreich ist dabei die CSS-Musterdateifür HTML, die wir im Anhang D abgedruckt haben.