Lektion 2: Wie funktioniert CSS?

In dieser Lektion werden Sie lernen, Ihr erstes Style-Sheet zu erstellen. Sie werden das Grundmodell von CSS kennenlernen und wir werden zeigen, welche Codezeilen notwendig sind, um CSS in einem HTML-Dokument zu verwenden.

Viele der Eigenschaften, die in Cascading Style Sheets (CSS) verwendet werden, ähneln denen von HTML. Wenn Sie bisher HTML für Layoutzwecke verwendet haben, werden Sie wahrscheinlich viele Codes wiedererkennen. Schauen wir uns ein konkretes Beispiel an.

Die grundlegende CSS-Syntax

Nehmen wir an, wir möchten ein schönes Rot als Hintergrundfarbe für unsere Webseite:

In HTML hätten wir es so gemacht:

	
	<body bgcolor="#FF0000">

Mit CSS erreichen wir das gleiche Resultat so:

	
	body {background-color: #FF0000;}

Wie Sie sehen, sind die Codes in HTML und CSS mehr oder weniger identisch. Das soeben gezeigte Beispiel zeigt Ihnen auch das grundlegende CSS-Modell:

Abbildung: Das grundlegende CSS-Modell

Aber wo soll der CSS-Code hin, werden Sie jetzt fragen. Genau dazu kommen wir jetzt.

CSS im HTML-Dokument anwenden

Es gibt drei Möglichkeiten, wie Sie CSS in einem HTML-Dokument verwenden können. Diese Methoden werden alle nachfolgend beschrieben. Wir empfehlen, dass Sie sich auf die letzte der drei Möglichkeiten konzentrieren.

Methode 1: In-line (Attribut-Stil)

Eine Möglichkeit CSS in HTML zu verwenden, ist das Attribut style. Auf dem obigen Beispiel mit dem roten Seitenhintergund aufbauend, kann dieser wie folgt eingefügt werden:

	<html>
	  <head>
		<title>Example</title>
	  </head>
	  <body style="background-color: #FF0000;">
		<p>Das ist eine rote Seite.</p>
	  </body>
	</html>

Methode 2: In-document (Tag-Stil)

Ein weiterer Weg ist, die CSS-Codes über den HTML-Tag <style> einzubinden, z.B. so:

	<html>
	  <head>
		<title>Example</title>
		<style type="text/css">
		  body {background-color: #FF0000;}
		</style>
	  </head>
	  <body>
		<p>Das ist eine rote Seite.</p>
	  </body>
	</html>

Methode 3: Extern (Verweis auf ein Style Sheet)

Die von uns empfohlene Methode ist, auf ein sog. externes Stylesheet zu verweisen. In alles Beispielen des Tutorials werden wir diese Methode anwenden.

Ein externes Stylesheet ist einfach eine Textdatei mit der Endung .css. Wie jede andere Datei auch, können Sie das Stylesheet auf Ihrem Webserver oder Ihrer Festplatte speichern.

Nehmen wir an, Ihr Stylesheet heißt style.css und befindet sich im Ordner style. Bildlich dargestellt, sieht das wie folgt aus:

Abbildung: Der Ordner 'style' enthält die Datei 'style.css'.

Der Trick bei dem Ganzen ist nun, aus dem HTML-Dokument (default.htm) auf das Stylesheet (style.css) zu verweisen. Solch ein Verweis kann mit einer Zeile HTML-Code bewerkstelligt werden:

	<link rel="stylesheet" type="text/css" href="style/style.css" />

Sehen Sie, der Pfad zu unserem Stylesheet wird mit Hilfe des Attributes href angegeben.

Die Codezeile muss in den Kopfteil des HTML-Dokumentes, zwischen die <head> und </head>-Tags, eingefügt werden. Etwa so:

	<html>
	  <head>
		<title>Mein Dokument</title>
		<link rel="stylesheet" type="text/css" href="style/style.css" />
	  </head>
	  <body>
	  ...

Dieser Verweis gibt dem Browser vor, dass er das Layout aus der angegebenen CSS-Datei verwenden soll, wenn er das HTML-Dokument darstellt. Das wirklich clevere an dieser Lösung ist, dass verschiedene HTML-Dokumente auf dieses gleiche Stylesheet verweisen können. Mit anderen Worten, eine CSS-Datei kann verwendet werden, um bei vielen HTML-Dokumenten das Layout festzulegen.

Abbildung: Viele HTML-Dokumente können auf das gleiche Stylesheet verweisen.

Setzen wir, was soeben gelernt haben, praktisch um.

Probieren Sie selbst!

Öffnen Sie Notepad (bzw. den Texteditor Ihrer Wahl) und erstellen Sie zwei Dateien – ein HTML-Dokument und eine CSS-Datei – mit folgenden Inhalten:

default.htm

	<html>
	  <head>
		<title>Mein Dokument</title>
		<link rel="stylesheet" type="text/css" href="style.css" />
	  </head>
	  <body>
		<h1>Mein erstes Stylesheet</h1>
	  </body>
	</html>

style.css

	body {
	  background-color: #FF0000;
	}

Nun speichern Sie beide Dateien in denselben Ordner. Denken Sie daran, die Dateien mit Ihren richtigen Endungen (“.css” bzw. “.htm”) zu speichern.

Öffnen Sie die default.htm in Ihrem Browser und Sie sehen, dass die Seite einen roten Hintergrund hat. Herzlichen Glückwunsch! Sie haben soeben Ihr erstes Stylesheet erstellt.

Fahren Sie mit der nächsten Lektion fort, in der wir einen Blick auf einige der Eigenschaften in CSS werfen werden.

<< Lesson 1: Was ist CSS?

Lesson 3: Farben und Hintergründe >>