CSS (Cascading Style Sheets) in HTML-Seiten einbinden

Es gibt mehrere Möglichkeiten CSS-Anweisungen in einer HTML-Seite einzubinden.

Wir wollen die folgende 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.

Die 3 Varianten um CSS einzubinden

Folgende 3 Möglichkeiten gibt es, HTML und CSS zu verknüpfen:

  1. direkt im Quellcode
  2. am Anfang der HTML-Datei
  3. ausgelagert in extra CSS-Datei

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, so dass 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 quasi ü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.