Einbinden eines Cascading-Style-Sheets (CSS) in ein HTML-Dokument
Samstag, 4. Juli 2009
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.
No related posts.