CSS einbinden - inline, head, extern
Nachdem man also das HTML-Markup entsprechend des DOCTYPEs erstellt hat, gilt es die einzelnen HTML-Elemente mit CSS zu stylen. Dabei sollen z.B. bestimmte DIV-Container korrekt auf der Seite positioniert werden oder auch Darstellungsformatierungen von Überschriften oder Paragraphen geändert werden.
Es gibt drei Möglichkeiten CSS-Formatierungen einem HTML-Element zuzuweisen. Die erste wäre die inline-Einbindung. Mit dem Attribut style werden Eigenschaften eines HMTL-Elements geändert.
1 2 3 4 5 | <h1 style="color: blue;">Eine Überschrift</h1>
<div style="background: red; width: 100px; height: 100px;">
Das ist ein DIV-Container, dessen Eigenschaften innerhalb
des DIV-Elements mit dem Attribut style festgelegt wurden.
</div> |
Diese Methode eignet sich dafür nur bestimmte Elemente einer HTML-Datei zu formatieren. Auf das obige Beispiel bezogen: das H1-Element würde die Farbe blau erhalten, alle weiteren H1-Überschriften in diesem HTML-Dokument würden ihre Standard-Farbe behalten.
Sollen jedoch alle h1-Überschriften dieses Dokuments die Farbe blau erhalten, dann eignet sich hierfür die zweite Methode - das Definieren der Formate zentral für ein HTML-Dokument im Kopfbereich dieses Dokuments.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Das style-Element zentral im Head einbinden</title>
<style type="text/css">
h1 {
color: blue;
}
div {
background: red;
width: 100px;
height: 100px;
}
</style>
</head>
<h1>Eine Überschrift</h1>
<div>
Ein DIV-Container mit Inhalten.</div>
<h1>Eine weitere Überschrift</h1>
<div>
Ein weiterer DIV-Container mit Inhalten.</div> |
Alle H1-Überschriften aus dem obigen Beispiel würden nun die Farbe blau erhalten und alle DIV-Container dieses Dokuments würden eine Größe von 100×100px und eine rote Hintergrundfarbe bekommen.
Für gewöhnlich besteht aber eine Internet-Seite aus vielen HTML-Dokumenten, die miteinander verknüpft sind. Soll die gesamte Site ein einheitliches Aussehen bekommen, dann macht es Sinn alle CSS-Formatierungen in einer CSS-Datei zu halten und diese Datei nur mit den entsprechenden HTML-Dokumenten zu verknüpfen. Das HTML-Markup der ersten Datei (z.B. index.html) könnte so aussehen:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Das style-Element in einer externen Datei</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Eine Überschrift auf der ersten Seite</h1>
<div>
Ein DIV-Container mit Inhalten auf der ersten Seite.
</div>
<h1>Eine weitere Überschrift auf der ersten Seite</h1>
<div>
Ein weiterer DIV-Container mit Inhalten auf der ersten Seite.
</div>
</body>
</html> |
Das HTML-Markup der zweiten Datei (z.B. news.html) könnte so aussehen:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Das style-Element in einer externen Datei</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Eine Überschrift auf der zweiten Seite</h1>
<div>
Ein DIV-Container mit Inhalten auf der zweiten Seite.
</div>
<h1>Eine weitere Überschrift auf der zweiten Seite</h1>
<div>
Ein weiterer DIV-Container mit Inhalten auf der zweiten Seite.
</div>
</body>
</html> |
Sowohl das erste als auch das zweite Dokument verweisen in der fünften Zeile auf die Stylesheet-Datei mit dem Namen style.css. In dieser Datei sind nun die CSS-Formatierungen für die gesamte Site definiert, die sich auf alle Seiten erstrecken.
1 2 3 4 5 6 7 8 | h1 {
color: blue;
}
div {
background: red;
width: 100px;
height: 100px;
} |
Demnach würden alle h1-Überschriften, sowohl in der ersten Datei als auch in der zweiten Datei die Farbe blau erhalten und die alle DIV-Container in beiden Dateien die Hintergrundfarbe rot und die Abmessungen von 100×100px bekommen.
Die genaue Syntax und weiterführende Erklärungen zu den drei Methoden werden in diesem Artikel auf SelfHTML.org http://de.selfhtml.org/css/formate/einbinden.htm besprochen. Auch die folgende Seite gibt weitere Informationen mit Anzeigebeispielen zum Thema CSS-Einbindung: http://selfmade-webdesign.fresh-webspace.de/css-eigenschaften-werte.php