CSS (Cascading Style Sheets) in HTML-Seiten einbinden

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

h1 {
    color: red;
    background-color: black;
}

Alle 3 sollte man sich ansehen (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 am geschicktesten. Dort sind die CSS-Anweisungen direkt in der HTML-Datei eingebunden und es kann schnell getestet werden.

Für die Entwicklung von Websites empfiehlt sich dann die 3. Variante. Dort werden die CSS-Anweisungen in einer externen Datei hinterlegt und diese Datei wird dann in jede 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 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:

h1 {
    color: red;
    background-color: black;
}

Unbedingt auf Leerzeichen achten, und als Klammern kommen hier die geschweiften zum Zuge!! So, CSS-Datei abspeichern und im HTML Editor die Vorschau für die HTML-Datei aufrufen.

Jetzt sollten wir die Überschrift <h1> in roter Schrift auf schwarzem Grund haben.

So einfach ist es, Design über CSS in HTML-Dateien zu integrieren.