Was ist CSS und wie wir CSS in HTML einbinden

CSS bedeutet "Cascading Style Sheets". Es hilft, Webseiten besser zu gestalten. Erfahre, was CSS ist und wie du CSS in HTML einbinden kannst.Tags: | | | | | | | | | |
Noch nicht sicher genug im Webdesign? Lass dir in unseren Programmier-Kursen in Kirchdorf oder unserer Wichtel-Webdesign-Agentur in Pettenbach weiterhelfen!

Worum geht´s?

In diesem Tutorial lernst du, was CSS ist, wofür du es verwendest und wie du CSS in HTML einbinden kannst.

1. Was ist CSS – einfach erklärt

Ursprünglich bestanden Webseiten für lange Zeit nur aus HTML-Code. Das funktionierte zwar ganz gut, aber die Webseiten sahen nicht sonderlich überwältigend aus. Links waren grundsätzlich blau, Überschriften hatten ihre bestimmte  Größe und so weiter.

Was wäre, wenn man das Aussehen und das Verhalten einer Webseite individualisieren und verändern könnte, ja sogar einen Teil der Website animieren könnte? Verschiedene Farben, Abstände, Schriften, und vieles mehr – das ist die Aufgabe von CSS.

Der Name „CSS“ steht für „Cascading Style Sheets“. Das bedeutet – frei übersetzt – in etwa „Listen von Stil-Vorgaben“, die ähnlich einem Wasserfall von oben „herabstürzen“ und sich entsprechend über eine Website verteilen.

Richtig angewendet kann CSS nämlich nicht nur einzelne HTML-Elemente wie z.B. eine Überschrift verändern. Über sogenannte CSS-Selektoren ist es auch möglich, mit nur wenigen Befehlen etwa z.B. alle Bilder einer bestimmten Unterseite (oder allgemein der Website) zu verändern. Oder auch z.B. jede zweite Zeile einer Tabelle.

Während HTML die Grund-Bausteine und Grund-Elemente unserer Webseiten bereitstellt, ist CSS für die Individualisierung des Aussehens und des Verhaltens unserer Websites zuständig.

Wie aber sieht nun so ein CSS-Befehl eigentlich aus? Und wie können wir CSS in HTML einbinden?

Da gibt es grob gesagt 3 Möglichkeiten:

  • CSS über das style-Attribut in HTML einbinden
  • Über das <style>-Tag im <header>-Bereich CSS in HTML einbinden
  • CSS-Befehle über eine .css-Datei in unser HTML einbinden

2. CSS inline über das style-Attribut in HTML einbinden

Der einfachste – aber auch unpraktischte – Weg, CSS inline in HTML einzubinden, ist über das style-Attribut. Du kannst es jedem einzelnen HTML-Element hinzufügen.

Nehmen wir mal an, wir wollen die Schriftfarbe einer h1-Überschrift verändern. Das könnte dann im HTML-Code so aussehen:

<h1 style="color: red;">Meine Überschrift</h1>

Das Ergebnis:

rote Überschrift in CSS

Durch das style-Attribut, das mit dem CSS-Befehl „color“ (=Textfarbe) und der entsprechenden Farbe gefüllt ist, wird das HTML-Element (in unserem Fall die h1-Überschrift) in seinen Eigenschaften abgeändert. In diesem Fall wird die Schriftfarbe rot eingefärbt.

Unser style-Attribut kann auch mehr als einen CSS-Befehl beinhalten. Wichtig ist nur, dass hinter jedem einzelnen CSS-Befehl ein Beistrich zu finden ist:

<h1 style="color: red; background-color: orange;">Meine Überschrift</h1>

In diesem Fall haben wir unsere h1-Überschrift zusätzlich zur roten Schriftfarbe noch mit einer orangenen Hintergrundfarbe versehen. Das Ergebnis:

rote Überschrift in CSS mit orangener Hintergrundfarbe

Das selbe Prinzip kannst du auch auf alle anderen HTML-Elemente anwenden, z.B. auf das <body>-Tag:

<body style="background-color: green;">
Irgendein Inhalt
</body>

In diesem Fall wird der gesamte Webseiten-Hintergrund grün eingefärbt.

Man sagt zu dieser Variante deswegen auch inline CSS, weil es einfach direkt in die HTML-„Zeile“ eingefügt wird.

Das style-Attribut ist schonmal recht nützlich. Nun aber weiter zur eigentlichen Power, die CSS uns bietet!

3. Über das <style>-Tag im <header>-Bereich unser CSS in HTML einbinden

Wenn wir das style-Attribut eines HTML-Elements setzen, können wir genau dieses HTML-Element verändern.

Was aber, wenn wir z.B. alle img-Elemente auf einmal verändern wollen?

Dann brauchen wir dazu CSS-Selektoren.

Und damit wir diese CSS-Selektoren auch einsetzen können, müssen wir sie irgendwo in unseren HTML-Code einfügen. Dies kann man z.B. im <head>-Bereich unseres HTML-Dokuments tun, in dem man ein <style>-Tag verwendet:

<html>
    <head>
        <style>
            img {
                width: 300px;
            }

            h1 {
                color: red;
            }
        </style>
    </head>
    <body>
<h1>Überschrift zu den Tieren</h1>
<img src="wal.jpg">
<img src="hund.jpg">
    </body>
</html>

Innerhalb des <head>-Tags findet sich das <style>-Tag. Dort hinein schreiben wir verschiedenste CSS-Selektoren und die CSS-Befehle, die auf die über die CSS-Selektoren ausgewählten HTML-Elemente angewendet werden.

In diesem Fall wählen unsere beiden CSS-Selektoren alle img-Tags (also alle Bilder) aus und setzen die Breite der Bilder auf 300px. Außerdem werden alle h1-Tags  im <body>-Tag auf Schriftfarbe rot gesetzt. Da es nur einziges h1-Tag im <body>-Tag gibt, wird nur diese eine Überschrift verändert.

Wie genau CSS-Selektoren denn nun funktionieren, schauen wir uns dann in einem eigenen Tutorial zu CSS-Selektoren an.

Aber bevor wir das tun, hier noch die dritte Möglichkeit, wie wir CSS in HTML einbinden können: mit Hilfe einer .css-Datei:

4. CSS-Befehle über eine .css-Datei in unser HTML einbinden

Das Einbinden von CSS-Befehlen über das style-Attribut hatte einen entscheidenden Nachteil: man muss es für jedes einzelne HTML-Element extra machen.

Ein Einbinden über CSS-Selektoren und dem <style>-Tag im <header>-Bereich unserer HTML-Seite ist da schon praktischer. Dann werden die CSS-Befehle auf alle HTML-Elemente der HTML-SEite, die mit den CSS-Selektoren ausgewählt wurden, angewendet.

Aber was, wenn wir mehr als eine einzige Unterseite haben?

Dann müssen wir unsere CSS-Befehle in jeder einzelnen Unterseite in das <style>-Tag im <header>-Bereich einfügen.

Was bei 4-6 Unterseiten noch ganz ok ist, wird schnell zum Albtraum, wenn es sich z.B. um einen Blog mit Hunderten Unterseiten handelt. Wir brauchen eine Lösung, die es uns erlaubt, unsere CSS-Selektoren und dazugehörigen CSS-Befehle gleich für mehrere einzelne Unterseiten zu definieren.

Und genau dafür sind .css-Dateien da.

4.1 Eine .css-Datei erstellen

Du kannst entweder in deiner Entwicklungsumgebung (IDE) wie Visual Studio Code oder auch einfach im Windows-Explorer eine neue .css-Datei erstellen. Im Grunde ist eine .css-Datei nichts anderes als eine Text-Datei, die du mit jedem Schreib-Programm wie z.B. WordPad bearbeiten kannst. Wichtig ist dabei nur, dass sie die Datei-Endung .css hat.

In eine .css-Datei schreibst du dann deine CSS-Selektoren und CSS-Befehle genau so, als würdest du sie in ein <style>-Tag im <head>-Bereich einer Unterseite schreiben. So können wir zum Beispiel unsere CSS-Selektoren und CSS-Befehle von vorher einfach übernehmen. Unsere .css-Datei sieht dann z.B. so aus:

img { 
    width: 300px; 
} 
h1 { 
    color: red; 
}

Es kommen in der .css-Datei keine HTML-Tags wie <head> oder <style> mehr vor, nur noch die CSS-Selektoren und die CSS-Befehle selbst.

Nun müssen wir die .css-Datei noch in unsere HTML-Seite einbinden:

4.2 Eine .css-Datei in HTML einbinden

Nachdem wir also nun unsere .css-Datei erstellt, befüllt und gespeichert haben, müssen wir sie in unsere HTML-Seite einbinden.

Das machen wir wieder im <head>-Bereich unserer HTML-Seite, und zwar so:

<head>
        <link rel="stylesheet" href="style.css">
</head>

Das <link>-Tag verbindet deine .html-Datei mit deiner .css-Datei, die in unserem Fall style.css heißt. Das rel-Attribut sagt dem Browser, dass es sich um ein Stylesheet handelt, und das href-Attribut kennen wir ja schon von den Links mit dem <a>-Tag.

Auch hier gilt wieder: Falls sich die .css-Datei z.B. in einem Unterordner namens „styles“ befindet, müssen wir wieder den Pfad anpassen, z.B. so:

<head> 
     <link rel="stylesheet" href="styles/style.css"> 
</head>

Das Gleiche gilt natürlich auch, wenn die style.css sich in einem übergeordneten Ordner befindet. Dann brauchen wir wieder unser „../style.css“ mit den Doppelpunkten.

4.3 Eine .css-Datei in mehrere HTML-Seiten einbinden

Wenn du nun eine Website mit mehreren einzelnen HTML-Unterseiten hast, musst du jetzt nur noch in jeder Unterseite ein entsprechendes <link>-Tag zu deiner .css-Datei setzen. Dann werden Änderungen in der .css-Datei in allen verlinkten Unterseiten übernommen.

In der Praxis wirst du aus diesem Grund fast immer mit der Variante mit den .css-Dateien arbeiten. Sie bringt mit dem kleinsten Aufwand den größten – auch langfristigen – Nutzen. Nicht nur bist du erheblich schneller in der Erstellung deiner Webseite, auch die Überarbeitung und Wartung geht so erheblich leichter von der Hand.

Damit du die ganze Macht von CSS nutzen kannst, steht dir aber noch eine kleine Hürde bevor: du wirst lernen müssen, wie CSS-Selektoren genau funktionieren.

Weil das ein sehr großes Thema ist, findest du alles Wichtige dazu in einem eigenen Tutorial über CSS-Selektoren.

Diskussion zum Tutorial

Du bist aus Oberösterreich? Dann nütze doch auch unsere flexiblen Programmier-Kurse in Kirchdorf - oder gib deine Website gerne in die guten Hände unserer erfahrenen Wichtel-Webdesign-Agentur.