CSS (Cascading Style Sheets) in HTML-Seiten einbinden
Es gibt mehrere Möglichkeiten CSS-Anweisungen in einer HTML-Seite einzubinden.
Wir wollen die folgenden CSS-Anweisungen auf die verschiedenen Arten einbinden. Als Vorgriff, was diese beiden CSS-Anweisungen „machen“. Die folgenden CSS-Anweisungen bewirken, dass Überschrift h1 mit der Schriftfarbe Rot und der Hintergrundfarbe Schwarz angezeigt werden.
h1 {
color: red;
background-color: black;
}
Alle 3 Varianten sollte man auf jeden Fall kennen, auch um fremde HTML-CSS-Seiten analysieren zu können.
3 Varianten um CSS einzubinden
Folgende 3 Möglichkeiten gibt es, HTML und CSS zu verknüpfen:
- direkt im Quellcode
- am Anfang der HTML-Datei
- ausgelagert in extra CSS-Datei (so macht man es am besten!)
Zum Erlernen ist die zweite Variante praktisch. Die CSS-Anweisungen werden direkt in der HTML-Datei eingebunden und es kann schnell getestet werden. Besser ist aber die dritte Variante.
Für die Entwicklung von Websites empfiehlt sich die dritte Variante. Dort werden die CSS-Anweisungen in einer externen Datei hinterlegt und nur eine Verknüpfung zu dieser CSS-Datei wird dann in jeder HTML-Seite eingebunden.
Variante 1: Befehl direkt im Quellcode
Direkt im Quellcode wirkt der Befehl nur an dieser bestimmten Stelle der Seite, damit man abweichende Designs verwenden kann.
Beispiel:
<h1 style="color: red;">Überschrift</h1>
Die Überschrift wird in Rot dargestellt.
Natürlich können die Befehle auch kombiniert werden.
Zusätzlich zur Vordergrundfarbe kommt jetzt noch die Hintergrundfarbe dazu:
<h1 style="color: red; background-color: black;">Überschrift</h1>
Hier ist natürlich die Frage berechtigt, warum nicht gleich mit den (veralteten) Attributen der HTML-Befehle das Design erstellen? Die Logik der Sache wird klar, wenn man diese Formatdefinitionen auslagert (siehe Variante 3 unten). Dadurch kann dann z.B. eine Anweisung erstellt werden, die dann für alle <h1> gelten, ohne dass speziell noch in den HTML-TAG eingegriffen werden muss. Dadurch wird das Design über die komplette Website gestülpt, egal wie viele Einzelseiten vorhanden sind.
Variante 2: am Anfang der HTML-Datei
Im Kopfbereich der HTML-Datei werden die CSS-Eigenschaften definiert. Diese wirken dann auf das ganze HTML-Dokument.
<!DOCTYPE html>
<html lang="de">
<head>
<style>
h1 {
color: red;
background-color: black;
}
</style>
</head>
<body>
<h1>jetzt HTML lernen mit CSS</h1>
</body>
</html>
Variante 3: Auslagern von CSS-Befehlen
Zum Auslagern werden 2 Dinge benötigt. Als Erstes eine neue Datei, ich nenne diese design.css (kann aber auch beliebig anders heißen) und als Zweites einen Verweis darauf in der HTML-Datei, die diese ausgelagerte Datei nutzen soll.
Verweis in der HTML-Datei:
Dieser Verweis sollte im <head>-Bereich der HTML-Datei eingegeben werden.
<link href="design.css" rel="stylesheet">
Nun erstellen wir eine neue Datei mit dem Namen „design.css“, die im selben Verzeichnis wie die HTML-Datei liegen muss!
Inhalt der Datei „design.css“:
h1 {
color: red;
background-color: black;
}
Unbedingt auf Leerzeichen achten, und als Klammern kommen hier die geschweiften Klammern zum Zuge! So, CSS-Datei abspeichern und im HTML Editor die Vorschau für die HTML-Datei aufrufen.
Jetzt sollten die Überschrift <h1> in roter Schrift auf schwarzem Grund angezeigt werden.
So einfach ist es, Design über CSS in HTML-Dateien zu integrieren.
Weiterempfehlen • Social Bookmarks • Vielen Dank
Bitte unterstützen Sie dieses Projekt
Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).
Spenden
Sie können uns eine Spende über PayPal zukommen lassen.
Weiterempfehlungen
Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.
Bücher über Amazon
Bestellen Sie Bücher über folgende Links bei Amazon:
Vielen Dank für Ihre Hilfe
-
E-Books zum Kurs
von HTML-Seminar.deE-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.
Mehr Details
-
