Was ist CSS?

Im Modul Strukturieren von Inhalten mit HTML haben wir behandelt, was HTML ist und wie es zum Markieren von Dokumenten verwendet wird. Diese Dokumente sind in einem Webbrowser lesbar. Überschriften werden größer als normaler Text dargestellt, Absätze beginnen auf einer neuen Zeile und haben Abstand zwischen ihnen. Links sind farbig und unterstrichen, um sie vom restlichen Text zu unterscheiden.

Was Sie sehen, sind die Standardstile des Browsers — sehr grundlegende Stile, die der Browser auf HTML anwendet, um sicherzustellen, dass die Seite im Grunde lesbar ist, selbst wenn vom Autor der Seite kein explizites Styling angegeben ist. Diese Stile sind in Standard-CSS-Stylesheets enthalten, die im Browser enthalten sind — sie haben nichts mit HTML zu tun.

Das Web wäre ein langweiliger Ort, wenn alle Webseiten so aussehen würden. Deshalb müssen Sie mehr über CSS lernen.

Mit CSS können Sie genau steuern, wie HTML-Elemente im Browser aussehen, und Ihre Dokumente Ihren Benutzern mit dem Design und Layout präsentieren, das Sie möchten.

• Ein Dokument ist in der Regel eine Textdatei, die mit einer Auszeichnungssprache strukturiert ist, am häufigsten HTML (diese werden als HTML-Dokumente bezeichnet). Sie können auch auf Dokumente treffen, die in anderen Auszeichnungssprachen wie SVG oder XML geschrieben sind. Wo wir zuvor über Webseiten gesprochen haben, enthält ein HTML-Dokument den Inhalt der Webseite und gibt ihre Struktur an.
• Das Präsentieren eines Dokuments für einen Benutzer bedeutet, es in eine für Ihr Publikum verwendbare Form zu konvertieren. Browser wie Firefox, Chrome, Safari und Edge sind darauf ausgelegt, Dokumente visuell zu präsentieren, beispielsweise auf einem Computerbildschirm, Projektor, Mobilgerät oder Drucker. Im Web-Kontext wird dies allgemein als Rendering bezeichnet; wir haben eine vereinfachte Beschreibung des Prozesses, wie eine Webseite gerendert wird, in How browsers load websites bereitgestellt.

CSS kann für viele Zwecke verwendet werden, die mit dem Aussehen Ihrer Webseite zusammenhängen. Die wichtigsten sind:

• Textstil, beispielsweise zum Ändern der Farbe und Größe von Überschriften und Links.
• Erstellung von Layouts, beispielsweise wandeln einer einzigen Textspalte in ein Mehrspalten-Layout um.
• Spezialeffekte wie Animation.

Die CSS-Sprache ist in Module organisiert, die zusammengehörige Funktionalitäten enthalten. Beispielsweise schauen Sie sich die MDN-Referenzseiten für das Modul Hintergründe und Rahmen an, um herauszufinden, wofür es gedacht ist und welche Eigenschaften und Funktionen es enthält. In diesem Modul finden Sie auch einen Link zu Spezifikationen, die die Technologie definieren.

CSS ist eine regelbasierte Sprache — Sie definieren Regeln, indem Sie Gruppen von Stilen angeben, die auf bestimmte Elemente oder Gruppen von Elementen auf Ihrer Webseite angewendet werden sollen.

Zum Beispiel könnten Sie entscheiden, die Hauptüberschrift auf Ihrer Seite als großen roten Text zu stylen. Der folgende Code zeigt eine sehr einfache CSS-Regel, die dies erreichen würde:

h1 {
  color: red;
  font-size: 2.5em;
}

• Im obigen Beispiel beginnt die CSS-Regel mit einem Selektor. Dieser wählt die HTML-Elemente aus, die wir stylen werden. In diesem Fall stylen wir Ebene-1-Überschriften (<h1>).
• Dann haben wir ein Paar geschweifte Klammern — { }.
• Die Klammern enthalten eine oder mehrere Deklarationen, die die Form von Eigenschafts- und Wertepaaren annehmen. Wir geben die Eigenschaft (zum Beispiel Farbe="color" im obigen Beispiel) vor dem Doppelpunkt an und den Wert der Eigenschaft nach dem Doppelpunkt (rot="red" ist der festgelegte Wert für die Farbe="color"-Eigenschaft).
• Dieses Beispiel enthält zwei Deklarationen, eine für Farbe="color" und eine andere für Schriftgröße="font-size".

Unterschiedliche CSS-Eigenschaften haben unterschiedliche zulässige Werte. In unserem Beispiel haben wir die Farbe="color"-Eigenschaft, die verschiedene Farbwerte annehmen kann. Wir haben auch die Schriftgröße="font-size"-Eigenschaft. Diese Eigenschaft kann verschiedene Größeneinheiten als Wert annehmen.

Ein CSS-Stylesheet enthält viele solcher Regeln, die nacheinander geschrieben sind.

h1 {
  color: red;
  font-size: 2.5em;
}

p {
  color: aqua;
  padding: 5px;
  background: midnightblue;
}

Sie werden feststellen, dass Sie schnell einige Werte lernen, während Sie andere nachschlagen müssen. Die einzelnen Eigenschaftsseiten auf MDN bieten Ihnen eine schnelle Möglichkeit, Eigenschaften und ihre Werte nachzuschlagen.

Wie in How browsers load websites erklärt, erhält der Browser beim Navigieren zu einer Webseite zuerst das HTML-Dokument, das den Inhalt der Webseite enthält, und konvertiert es in einen DOM-Baum.

Danach werden alle auf der Webseite gefundenen CSS-Regeln (entweder direkt im HTML eingefügt oder in referenzierten externen .css-Dateien) in verschiedene "Buckets" sortiert, basierend auf den verschiedenen Elementen, auf die sie angewendet werden (wie durch ihre Selektoren angegeben). Die CSS-Regeln werden dann auf den DOM-Baum angewendet, was zu einem Render-Baum führt, der anschließend im Browserfenster gemalt wird.

Sehen wir uns ein Beispiel an. Zuerst definieren wir ein HTML-Snippet, auf das CSS angewendet werden könnte:

<h1>CSS is great</h1>

<p>You can style text.</p>

<p>And create layouts and special effects.</p>

Nun unser CSS, wiederholt aus dem vorherigen Abschnitt:

h1 {
  color: red;
  font-size: 2.5em;
}

p {
  color: aqua;
  padding: 5px;
  background: midnightblue;
}

Dieses CSS:

• Wählt alle <h1>-Elemente auf der Seite aus, färbt ihren Text rot und macht sie größer als ihre Standardgröße. Da in unserem Beispiel-HTML nur ein <h1> vorhanden ist, wird nur dieses Element gestylt.
• Wählt alle <p>-Elemente auf der Seite aus, gibt ihnen eine benutzerdefinierte Text- und Hintergrundfarbe und etwas Abstand um den Text herum. In unserem Beispiel-HTML gibt es zwei <p>-Elemente, und beide erhalten das Styling.

Wenn das CSS auf das HTML angewendet wird, sieht die gerenderte Ausgabe wie folgt aus:

Jetzt, da Sie ein gewisses Verständnis davon haben, was CSS ist und wie es funktioniert, gehen wir weiter dazu über Ihnen etwas Übung im Schreiben von CSS zu geben und die Syntax detaillierter zu erklären.

Schreiben Sie Ihre ersten Zeilen CSS!, Scrimba ^{MDN-Lernpartner}

Diese Bildschirmpräsentation gibt einen nützlichen Überblick über die grundlegende CSS-Syntax und bietet eine interaktive Herausforderung, bei der Sie mehr Übung im Schreiben von CSS-Deklarationen bekommen können.

• Übersicht: Grundlagen der CSS-Stilgestaltung
• Weiter