3.4.1.2) Einbindung in (X)HTML

CSS-Eigenschaften können im wesentlichen auf 3 Arten mit (X)HTML verwendet werden:

Externe Styles: Einbindung einer CSS-Datei im <head>-Bereich

Die CSS-Eigenschaften werden in eine externe Datei, meist mit der Endung „.css“ ausgelagert. Diese Datei wird dann im <head>-Bereich der (X)HTML-Seite mit einem <link>-Tag eingebunden.

<head>
<-- andere Head-Angaben -->
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

Interne Styles: Definieren der CSS-Eigenschaften im <head>-Bereich

Bei dieser Methode werden die CSS-Eigenschaften nicht ausgelagert, sondern direkt im <head>-Bereich festgelegt. Dies geschieht innerhalb eines style-Tags.

<head>
<-- andere Head-Angaben -->
<style type="text/css">
/* <![CDATA[ */
h2 {
     background-color: #E6DACF;
     color: #806040;
}
p  {
     background-color:#CFDCE6;
     color: #406480;
}
/* ]]> */
</style>
</head>

Inline-Styles: CSS-Eigenschaften direkt im (X)HTML-Tag festlegen

Diese Methode eignet sich besonders, wenn es nur 1-2 CSS-Formatierung für die ganze Seite gibt. Dann wird die Eigenschaft direkt im Tag innerhalb eines style-Attributs festgelegt.

<span style="font-size: 10px; font-family: serif">Das ist ein Text.</span>