Webmaster-Crashkurs

Einbinden von CSS

Damit das HTML-Dokument weiß, wie es dargestellt werden soll, wird CSS benötigt. Dabei kann dass Einbinden von CSS auf 3 Wege erfolgen. Alle 3 werden hier vorgestellt. Anhand von der Anweisung „color: red;“ werden anhand von Beispielen gezeigt, wie CSS eingebunden wird. Die Anweisung color:red zeigt Schrift rot an.

Einbinden von CSS direkt im HTML-TAG

Um direkt bei einem HTML-TAG CSS einzubinden, wird der HTML-TAG mit dem Attribut style=“ erweitert.

<h2 style="color:red;">Beispiel CSS einbinden</h2>

<p>Es werden 3 verschiedene Möglichkeiten gezeigt, wie CSS eingebunden 
werden kann</p>

<h2>Zur Demonstration wird einen zweite Überschrift benötigt</h2>

Dies hat natürlich wenig mit dem in HTML gepredigten Grundprinzip der Trennung von Inhalt und Struktur und dem Design zu tun. Hier haben wir lustig beides ineinander vermischt. Zum Testen einen CSS-Befehls ist es OK.

Einbinden von CSS im Kopf der HTML-Datei

In einem getrennten Bereich können alle CSS-Anweisungen aufgeführt werden dazu wird im Kopf-Bereich durch Angabe von <style type=“text/css“> und </style> ein Bereich für die Stylesheet-Formatdefinitionen geschaffen. Innerhalb des Bereiches wird zur Sicherheit um alte Browser nicht zu Chaos anzustiften der Bereich <!-- --> auskommentiert. Das gilt aber nur für Browser. Im folgenden Beispiel werden jetzt ALLE <h2> orange formatiert. Das ist schon der erste Vorteil gegenüber der ersten Art des Einbindens von CSS.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Beispiel CSS einbinden</title>

<style type="text/css">
<!--
h2 {
    color:orange;
}
-->
</style>

</head>

<body>
<h2>Beispiel CSS einbinden</h2>
<p>Es werden 3 verschiedene Möglichkeiten gezeigt, wie CSS eingebunden 
werden kann</p>
<h2>Zur Demonstration wird einen zweite Überschrift benötigt</h2>
</body>
</html>

Noch haben wir aber die Trennung zwischen Inhalt/Struktur und Design noch nicht perfekt. Außerdem müssten wir auf jeder HTML-Seite alle CSS-Angaben wieder und wieder aufführen und wenn die Website 100 Seiten enthält wäre es schon richtig (unnötige) Arbeit. Daher die dritte Art, CSS einzubinden, in der nur ein Link auf eine externe Datei in den Kopf des HTML-Dokuments geschrieben wird.

Einbinden über externe CSS-Datei

Wenn wir eine externe CSS-Datei verwenden wollen, wird nur im Kopf der HTML-Datei ein Verweis eingebaut. Unser vorheriges Beispiel hat nun 2 Dateien – eine für das HTML-Dokument und einen für die CSS-Anweisungen und sieht dann wie folgt aus:

HTML-Datei:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Beispiel CSS einbinden</title>

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

</head>
<body>
<h2>Beispiel CSS einbinden</h2>
<p>Es werden 3 verschiedene Möglichkeiten gezeigt, wie CSS eingebunden 
werden kann</p>
<h2>Zur Demonstration wird einen zweite Überschrift benötigt</h2>
</body>
</html>

CSS-Datei mit dem Namen design.css im gleichen Verzeichnis:

h2 {
  color: blue;
}

In der CSS-Datei steht sonst nichts! Es wird kein DTD oder sonstiges benötigt!

Vorteile der externen CSS-Datei

Die Vorteile der externen CSS-Datei sind nicht zu unterschätzen. Jetzt ist es fast egal, ob unsere Website 10 Seiten oder 10.000 Seiten umfasst. Alle Seiten haben im Kopf den Verweis auf die externe CSS-Datei. Wird nun das Design geändert muss nur in dieser einen Datei die entsprechenden Änderungen gemacht werden und die komplette Website sieht auf einen Schlag anders aus. So können schnell und effektiv Änderungen am Design gemacht werden – der sogenannte Relaunch.

Aufgabe: Binden Sie CSS sowohl über die Möglichkeit 1 und 2 ein

Probieren Sie aus, wenn Sie die erste und zweite Möglichkeit mischen. Also wenn Sie den ersten <h2>-Tag direkt über style mit rot formatieren und in derselben HTML-Datei im Kopfbereich für <h2> die Farbe orange setzen. Was passiert und warum?

HTML5-Video-Kurs:
hier klicken für
mehr Informationen
© 2008-2024   •   www.webmaster-crashkurs.de - HTML5 Tutorial mit Videos • Impressum • Datenschutzerklärung
weitere eigene Projekte: