Was ist CSS?

Im Modul Strukturieren von Inhalten mit HTML haben wir besprochen, was HTML ist und wie es verwendet wird, um Dokumente zu markieren. Diese Dokumente sind in einem Webbrowser lesbar. Überschriften sehen größer aus als normaler Text, Absätze brechen in eine neue 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 Gestaltung, die der Browser auf HTML anwendet, um sicherzustellen, dass die Seite im Wesentlichen lesbar ist, selbst wenn kein explizites Styling vom Autor der Seite angegeben ist. Diese Stile sind in den standardmäßigen CSS-Stylesheets enthalten, die der Browser enthält — sie haben nichts mit HTML zu tun.

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

Mit CSS können Sie genau steuern, wie HTML-Elemente im Browser aussehen und Ihre Dokumente Ihren Benutzern mit jedem gewünschten Design und Layout präsentieren.

• Ein Dokument ist normalerweise eine Textdatei, die mit einer Auszeichnungssprache strukturiert ist, am häufigsten HTML (diese werden als HTML-Dokumente bezeichnet). Sie könnten auch auf Dokumente stoßen, 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 bestimmt ihre Struktur.
• Präsentieren eines Dokuments für einen Benutzer bedeutet, es in eine für Ihr Publikum nutzbare Form zu konvertieren. Browser wie Firefox, Chrome, Safari und Edge sind darauf ausgelegt, Dokumente visuell darzustellen, z. B. auf einem Computerbildschirm, Projektor, mobilen Gerät oder Drucker. Im Web-Kontext wird dies im Allgemeinen als Rendering bezeichnet; wir haben eine vereinfachte Beschreibung des Prozesses gegeben, durch den eine Webseite im Artikel Wie Browser Websites laden gerendert wird.

CSS kann für viele Zwecke im Zusammenhang mit dem Look und Feel Ihrer Webseite verwendet werden. Die wichtigsten sind:

• Textgestaltung, zum Beispiel um die Farbe und Größe von Überschriften und Links zu ändern.
• Erstellen von Layouts, zum Beispiel, um eine einzelne Textspalte in ein Mehrspaltenlayout zu verwandeln.
• Spezielle Effekte wie Animationen.

Die CSS-Sprache ist in Module organisiert, die verwandte Funktionen enthalten. Zum Beispiel werfen Sie einen Blick auf die MDN-Referenzseiten für das Hintergründe und Rahmen Modul, um herauszufinden, was sein Zweck ist und welche Eigenschaften und Merkmale 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 gestalten. Der folgende Code zeigt eine sehr einfache CSS-Regel, die dies erreicht:

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

• Im obigen Beispiel öffnet die CSS-Regel mit einem Selektor. Dieser wählt die HTML-Elemente aus, die wir stylen werden. In diesem Fall stylen wir Überschriften der Ebene eins (<h1>).
• Danach sehen wir eine Gruppe von geschweiften Klammern — { }.
• Die Klammern enthalten eine oder mehrere Deklarationen, die in Form von Eigenschafts- und Wertpaaren vorliegen. Wir geben die Eigenschaft an (zum Beispiel color im obigen Beispiel) vor dem Doppelpunkt, und wir geben den Wert der Eigenschaft nach dem Doppelpunkt an (red ist der Wert, der für die color-Eigenschaft festgelegt wird).
• Dieses Beispiel enthält zwei Deklarationen, eine für color und eine andere für font-size.

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

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

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

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

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

Wie in Wie Browser Websites laden erklärt, wenn Sie zu einer Webseite navigieren, empfängt der Browser zuerst das HTML-Dokument mit dem Inhalt der Webseite und konvertiert es in eine DOM-Struktur.

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 die DOM-Struktur angewendet, was zu einer Render-Struktur führt, die dann im Browserfenster gezeichnet wird.

Werfen wir einen Blick auf ein Beispiel. Zuerst definieren wir ein HTML-Snippet, auf das 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 es nur ein <h1> in unserem Beispiel-HTML gibt, wird nur dieses Element die Gestaltung erhalten.
• Wählt alle <p>-Elemente auf der Seite aus, gibt ihnen eine benutzerdefinierte Text- und Hintergrundfarbe und etwas Abstand um den Text herum. Es gibt zwei <p>-Elemente in unserem Beispiel-HTML, und sie alle bekommen die Gestaltung.

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

Jetzt, da Sie ein gewisses Verständnis dafür haben, was CSS ist und wie es funktioniert, lassen Sie uns weitermachen und Ihnen etwas Übung im Schreiben von CSS geben und die Syntax im Detail erklären.

• Übersicht: Grundlagen der CSS-Stilgestaltung
• Weiter