Grundidee

Trennung von Inhalt und Formatierung. In (X)HTML-Seiten sollten nur Tags aufweisen, die die Struktur und Gliederung der Seite festlegen. Alle Angaben zur Formatierung sollen in einer Vorlage definiert werden. Zur Definition von Vorlagen zu (X)HTML werden Cascading Style Sheets (CSS) verwendet.
Die sogenannten CSS Regeln werden werden separat aufgeführt. Hierzu gibt es drei Möglichkeiten:

  • Inline Style
  • Header Style
  • External Style
Inline Style <p style="font-size: 14px">...</p>

Der Style wird innerhalb des Tags definiert.

Diese Methode widerspricht dem Grundsatz Inhalt und Gestaltung zu trennen.
Header Style 
...
<head>
  ...
  <style type="text/css">
    p {font-size: 14px; color: blue;}
  </style>
  ...
</head>
...

Die Styles werden im Kopfbereich der (X)HTML-Datei definiert.

Diese Methode trennt grundsätzlich Inhalt und Gestaltung, jedoch nur innerhalb der Datei.

External Style 
...
<head>
  ...
  <link rel="StyleSheet" href="textformate.css" type="text/css">
  <link rel="StyleSheet" href="layout.css" type="text/css">
  ...
</head>
...

Die Formatierungsregeln werden in externen Textdateien mit der Erweiterung .css festgehalten.

Diese Methode trennt konsequent zwischen Inhalt und Form. Zudem können die Formate einer ganzen Website in einer einzigen CSS-Datei verwaltet werden. Dies steigert die Effizienz.

Da mehrere CSS-Vorlagen eingebunden werden können, lohnt es sich, die CSS-Regeln thematisch auf verschiedene Dateien zu verteilen. Im Beispiel werden die beiden Dateien textformate.css und layout.css mit einem Verweis in die (X)HTML-Datei eingebunden.
Beispiel StyleSheet 
html, body {
  font-size: small;
  font-family: Arial,Helvetica,sans-serif;
  margin: 0;
  padding: 0;
  height: 100%;
}

h1, h2, h3, h4, h5, h6, ol, li, dl, dt, dd, p, input, textarea, select {
  text-align: left;
  line-height: 1.2em;
  letter-spacing: 1pt;
}

p {
  font-size: 120%;
}

h1 {
  font-size: 180%;
}

h2 {
  font-size: 160%;
}

h3 {
  font-size: 140%;
}

a:link {
  color: #cc0000;
}

a:visited {
  color: #660000;
}

a:hover {
  color: #e85c5c;
  font-weight: bold;
}

img {
  border-style: none;
  border-width: 0px;
  width: 280px;
}

.links {
  text-align: left;
}

.rechts {
  text-align: right;
}
.zentriert {
  text-align: center;
}

.verborgen {
  visibility: hidden;
}

ul {
  list-style-type: square;
}

ol {
  list-style-type: lower-roman;
  font-size: 110%;
}

li {
  font-size: 110%;
}

dl {
  font-size: 110%;
}

dt {
  font-weight: bold;
  font-style: oblique;
}

dd {
  font-style: oblique;
}

Jede Anweisung sagt dem Browser, wie er das entsprechende Element einer (X)HTML-Datei darstellen soll. Alle CSS-Anweisungen haben die Form:

selector {declaration: value}
 

Mehrere Deklarationen werden durch Semikolon getrennt: z.B. beim body Schriftgrösse, Zeilenhöhe etc..

Sollen gleichzeitig mehrere (X)HTML-Elemente definiert werden, so werden sie durch Komma getrennt aufgeführt: z.B. h2, h3.
 

Es kann auch eine Liste von Werten kommagetrennt angeführt werden: z.B. font-family. Werte die ein Leerezeichen enthalten müssen in Anführungszeichen gesetzt werden.
 

Eigene Tags können in HTML nicht defniert werden. Abhilfe schafft das class-Attribut. Eingeleitet werden Klassen mit einem Punkt: z.B. .zentriert. In der (X)HTML-Datei kann das Format wie folgt zugewiesen werden: <p class= "zentriert">Tabelle 1</p>.
 

Soll eine Klasse nur innerhalb eines bestimmten Elementes verwendet werden, so muss in der Definition das Element der Klassendefinition vorangestellt werden: z.B. p.kleiner.
 

Hinweis: Die Anweisungen zu einem Element gelten auch für alle darin enthaltenen Elemente. Z.B. gilt die Anweisung font-family des Elements body auch für die im Body enthalten h1, h2, h3, p, etc.

Die Schriftgrösse wurde einzige im body-Tag absolut definiert, alle anderen Elemente werden relativ zu ihrem Elternelement definiert.