Einbinden eines Cascading-Style-Sheets (CSS) in ein HTML-Dokument

Samstag, 4. Juli 2009

VN:F [1.9.3_1094]
Rating: 0.0/5 (0 votes cast)

Dieses kleine Tutorial soll am Beispiel des Grundgerüsts eines HTML-Dokuments zeigen, wie ein Cascading-Style-Sheet (CSS) in ein HTML-Dokument eingebunden wird, sodass der in der .css-Datei enthaltene Code vom Browser interpretiert wird.
Hier nun also das HTML-Grundgerüst eines HTML-Dokuments:

<html>
<head>
<title>Meine erste Webseite</title>
</head>
<body>
Hello World!
</body>
</html>

Damit der in der .css-Datei enthaltene Code interpretiert wird, muss die entsprechende .css-Datei im HTML-Dokument referenziert werden. Dies geschieht mit folgendem Code:

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

Nach dem href=“ steht der Name der .css-Datei. Sollte die .css-Datei nicht im gleichen Ordner liegen wie das entsprechende HTML-Dokument, so muss hier der Pfad zur Datei angegeben werden. In diesem Beispiel heißt die Datei style.css.
Dieser Code muss nun in den Kopf des entsprechenden HTML-Dokuments eingebunden werden (immer zwischen den beiden Tags <head> und </head>):

<html>
<head>
<title>Meine erste Webseite</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
Hello World!
</body>
</html>

Nach dem der Code in das HTML-Dokument eingefügt wurde, wird die referenzierte .css-Datei vom Browser interpretiert..

Leave a Reply