Wenn ein Browser CSS-Definitionen vorfindet, formatiert er das Dokument entsprechend den darin festgelegten Regeln. Es gibt drei Möglichkeiten, CSS-Definitionen in Dokumente einzufügen: mit externen Stylesheets, mit eingebetteten Stylesheets oder direkt im betroffenen Element.
Externes Stylesheet
Ein externes Stylesheet wird in der Regel verwendet, wenn für mehrere Seiten dieselbe Formatierung angewandt werden sollen. So müssen Sie die CSS-Angaben nur einmal im externen Stylesheet ändern, um die Darstellung aller Seiten zu ändern. Ein externes Stylesheet wird mit dem <link>-Tag im <head>-Bereich der Webseite eingebunden. Zum Beispiel:
<head>
<link rel="stylesheet" type="text/css" href="externes_stylesheet.css"/>
<head>
Der Browser liest die CSS-Definitionen in der Datei „externes_stylesheet.css" und wendet die entsprechende Formatierung auf die Seiten an, in die sie eingebunden ist.
Ein externes Stylesheet kann in jedem beliebigen Texteditor bearbeitet werden. Die Datei darf nur CSS-Definitionen enthalten. HTML-Tags sollten nicht in dem Stylesheet nicht enthalten sein.. Wenn Sie das Stylesheet mit Ihren Definitionen erstellt haben, speichern Sie die Datei mit der Erweiterung „.css". Das folgende Beispiel zeigt die Syntax in einem externen Stylesheet:
hr {color: red}
p {margin-left: 10px} body {background-color: yellow)}
Eingebettetes Stylesheet
Ein eingebettetes Stylesheet sollte verwendet werden, wenn ein einzelnes Dokument eine besondere Formatierung erhalten soll. Eingebettete Stylesheets werden mit dem <style>-Tag im <head>-Bereich der Seite eingebunden.
<head>
<style type="text/css">
hr {color: red}
p {margin-left: 10px}
body {background-color: yellow)}
</style></head>
Der Browser liest die CSS-Definitionen des Stylesheets und zeigt den Inhalt der Webseite entsprechend formatiert an.
Direktformatierung von Elementen
Diese Methode wird verwendet, um einzelne Elemente an einer Stelle der Webseite individuell zu formatieren. Dazu verwenden Sie das style-Attribut im einleitenden Tag des Elements. Das style-Attribut kann beliebige CSS-Eigenschaften enthalten. Im folgenden Beispiel werden die Farbe und der linke Abstand eines Absatzes geändert:
<p style="color: red; margin-left: 10px">Dieser Absatz wurde mit dem style-Attribut direkt formatiert.</p>