Inhalt
1 – Stylesheets in HTML einbinden
Beim Einbinden von Stylesheets gibt es drei verschiedene Möglichkeiten. Kennst du schon unsere CSS Grundlagen?
Die drei Verfahrensweisen können untereinander beliebig kombiniert werden, dabei wird immer die direktere Methode priorisiert. Das bedeutet, dass die Angaben die innerhalb einer HTML-Datei gemacht werden höhere Priorität haben, als die Angaben die in einer externen CSS-Datei beim selben Element oder Klasse gemacht werden. Die höchste Wertigkeit haben CSS Angaben die unmittelbar mit dem Style-Tag am Element gemacht werden. Im Folgenden die drei Verfahrensweisen zum Verständnis ausführlich erklärt.
2 – Einbinden einer externen Stylesheetdatei
Stylesheetdefinitionen werden in einer zentralen Datei gespeichert. Jedes HTML Dokument bindet diese Datei ein, sodass bei Änderungen die global gemacht werden müssen (z.B. Änderung der Schriftgröße auf allen Seiten) nur eine Änderung in der Datei erfolgen muss, um die Eigenschaft des Elements auf allen Seiten zu ändern.
Auf folgender Seite ist die Textdatei style.css eingebunden, die Angaben über das Einbinden einer CSS-Datei müssen im Head-Bereich einer Seite gemacht werden (Zeile 5).
HTML-Code (index.html):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>Separate CSS Datei einbinden</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <p>So wird ein Stylesheet eingebunden</p> <div class="zum_testen">Das ist ein Text in einer Testklasse</div> </body> </html>
Der Inhalt der CSS-Datei könnte wie folgt aussehen.
CSS-Code (style.css):
* body {
font-family : Arial, Verdana;
color : #000000;
background-color : #ffffff;
}
* p {
color : #ff0000;
}
zum_testen {
font-family : Arial, Verdana;
color : #ffffff;
background-color : #323232;
}
Im body wird die Schriftfarbe Schwarz definiert (color:#000000; oder color:black;), jedoch wirkt sich das auf das Paragraphenelement (p-Tag) und auf den div-Container nicht aus, diese haben eigene Farbangaben und somit werden diese priorisiert. Achte beim Einbinden von CSS in HTML auf unsere Best Practises.
Hier sehen Sie das Ergebnis
CSS Datei erstellen: Eine solche externe CSS-Datei kann ganz einfach erstellt werden. Entweder indem die Dateiendung einer bestehenden Textdatei in .css geändert wird, oder indem eine neue Datei mit dem Editor erstellt wird und diese dann wie etwa in obigen Beispiel style.css genannt wird.
3 – Stylesheets im einer HTML Datei definieren
Eine weitere Möglichkeit Elemente mit CSS zu definieren ist die Definition in der HTML Datei selbst. Die Angaben werden im header (Kopfbereich) gemacht (Zeile 5-9).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Stylesheet im html-header</title>
<style type="text/css">
<!--
p { color: red }
-->
</style>
</head>
<body>
<p>Testseite</p>
</body>
</html>
Hier sehen Sie das Ergebnis
4 – HTML Elemente direkt definieren
Mit Hilfe des Style-Attributs können Sie die Elemente direkt formatieren (Zeile 7).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>Elemente direkt mit CSS definieren</title> </head> <body> <p style="font-size:2em;">Sehr große Schrift</p> </body> </html>
Hier sehen Sie das Ergebnis
