Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt
Sie befinden sich: Startseite » CSS lernen » CSS in HTML einbinden

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:

  1. direkt im Quellcode
  2. am Anfang der HTML-Datei
  3. 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

Wenn Sie einen Fehler finden, bitte mitteilen (egal ob Schreibfehler oder inhaltlicher Fehler).

Mit Maus fehlerhafte Stelle markieren und übernehmen mit folgendem Button:



(kann angegeben werden)

Nach Absenden kommt hier Feedback! Bitte nicht doppelt absenden. Danke.

    E-Books zum Kurs

    von HTML-Seminar.de

    E-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.

    Mehr Details

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 :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

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:

Fehler melden

Vielen Dank für Ihre Hilfe