Verlauf
Alle Kapitel anzeigen
voriges Kapitel
Wie bereits erwähnt, können CSS-Stil-Angaben in ein HTML-Dokument integriert werden oder auch in einer separaten CSS-Datei gespeichert und referenziert werden. Hier soll nun an einem kurzen Beispiel, das einen Textabschnitt "Hervorhebung" fett druckt, die Anwendung dieser beiden Möglichkeiten erläutert werden:
<html>
<head>
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
h1 { color: #FF0000;}
.Hervorhebung { font-weight: bold;}
-->
</style>
</head>
<body>
<h1>Überschrift</h1>
<p>Diese Textstelle ist besonders <span class="Hervorhebung">wichtig</span>! </p>
</body>
</html>
Im Head-Bereich des HTML-Dokuments wird die Stildefinition als CSS festgelegt - für ein HTML-Element (hier: h1 für eine Überschrift) in der Farbe rot und für eine Klasse (hier: "Hervorhebung") in Fettdruck. Der Klassenname kann frei gewählt werden und darf keine Leerzeichen oder Umlaute enthalten. Im Text werden nun alle genannten Elemente und alle gekennzeichneten Klassen entsprechend dargestellt. Obiges Beispiel würde also folgendermaßen ausschauen:
Bitte hier klicken!
Um das gleiche Beispiel mit einer separaten CSS-Datei - nennen wir sie bsp1.css - zu realisieren, müsste diese (nur) folgenden Inhalt haben:
h1 { color: #FF0000;}
.Hervorhebung { font-weight: bold;}
Im HTML-Dokument wird die CSS-Datei nun so referenziert:
<html>
<head>
<title>Unbenanntes Dokument</title>
<link href="bsp1.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Überschrift</h1>
<p>Diese Textstelle ist besonders <span class="Hervorhebung">wichtig</span>!</p>
</body>
</html>
Auf diese Art und Weise können die Stilangaben natürlich auch in mehreren HTML-Dateien verwendet (und auch zentral, d.h. nur an einer Stelle verändert) werden. Das Ergebnis können Sie hier überprüfen.
