Was ist CSS?

Im Modul Strukturieren von Inhalten mit HTML haben wir behandelt, was HTML ist und wie es verwendet wird, um Dokumente zu markieren. Diese Dokumente werden in einem Webbrowser lesbar sein. Überschriften sehen größer aus als normaler Text, Absätze brechen in eine neue Zeile um und haben Abstand zwischen ihnen. Links sind farbig und unterstrichen, um sie vom Rest des Textes zu unterscheiden.

Was Sie sehen, sind die Standardstile des Browsers — sehr grundlegendes Styling, das der Browser auf HTML anwendet, um sicherzustellen, dass die Seite lesbar ist, selbst wenn der Autor der Seite kein explizites Styling angegeben hat. Diese Stile sind in den 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 Websites so aussähen. Deshalb müssen Sie CSS lernen.

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

• Ein Dokument ist normalerweise eine Textdatei, die mit einer Auszeichnungssprache strukturiert ist, meistens HTML (diese werden als HTML-Dokumente bezeichnet). Sie können auch auf Dokumente stoßen, die in anderen Auszeichnungssprachen wie SVG oder XML geschrieben sind. Ein HTML-Dokument enthält den Inhalt einer Webseite und spezifiziert deren Struktur.
• Ein Dokument einem Benutzer präsentieren bedeutet, es in eine für das Publikum nutzbare Form zu konvertieren. Browser wie Firefox, Chrome, Safari und Edge sind dafür ausgelegt, Dokumente visuell zu präsentieren, zum Beispiel auf einem Computerbildschirm, Projektor, Mobilgerät oder Drucker. Im Web-Kontext wird dies allgemein als Rendering bezeichnet; wir haben eine vereinfachte Beschreibung des Prozesses bereitgestellt, durch den eine Webseite im Artikel Wie Browser Websites laden gerendert wird.

CSS kann für viele Zwecke in Bezug auf das Aussehen und Gefühl Ihrer Webseite verwendet werden, zum Beispiel:

• Textstyling, einschließlich der Änderung der Farbe und Größe von Überschriften und Links.
• Erstellen von Layouts, wie zum Beispiel Rasterlayouts oder mehrspaltigen Layouts.
• Besondere Effekte wie Animationen.

Die CSS-Sprache ist in Module organisiert, die zusammengehörige Funktionalitäten enthalten. Sehen Sie sich zum Beispiel die MDN-Referenzseiten für das Modul Hintergründe und Rahmen an, um herauszufinden, was deren Zweck ist und welche Eigenschaften und Funktionen es enthält. Auf unseren Modul-Seiten finden Sie auch Links zu Spezifikationen, die die Technologien 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 beschließen, die Hauptüberschrift auf Ihrer Seite als großen roten Text zu stylen. 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 Level-1-Überschriften (<h1>).
• Dann fügen wir ein Paar geschwungene Klammern — { } — hinzu.
• Die Klammern enthalten eine oder mehrere Deklarationen, die in Form von Eigenschafts- und Wertpaaren auftreten. Wir geben die Eigenschaft an (zum Beispiel color im obigen Beispiel) vor dem Doppelpunkt an, 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 solche 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 erlernen, während Sie andere nachschlagen müssen. Die einzelnen Eigenschaftsseiten auf MDN bieten Ihnen eine schnelle Möglichkeit, Eigenschaften und ihre Werte nachzuschlagen.

Wie im Artikel Wie Browser Websites laden erklärt, empfängt der Browser beim Navigieren zu einer Webseite zuerst das HTML-Dokument, das den Webseiteninhalt enthält, und konvertiert es in einen DOM-Baum.

Danach werden alle in der Webseite gefundenen CSS-Regeln (entweder direkt im HTML eingefügt oder in referenzierten externen .css-Dateien) in verschiedene "Eimer" sortiert, basierend auf den verschiedenen Elementen, auf die sie angewendet werden sollen (wie in ihren Selektoren angegeben). Die CSS-Regeln werden dann auf den DOM-Baum angewendet, was zu einem Renderbaum führt, der dann im Browserfenster gezeichnet wird.

Lassen Sie uns ein Beispiel betrachten. 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 deren Text rot und macht sie größer als ihre Standardgröße. Da es nur ein <h1> in unserem Beispiel-HTML gibt, bekommt nur dieses Element das Styling.
• Wählt alle <p>-Elemente auf der Seite aus, gibt ihnen eine benutzerdefinierte Text- und Hintergrundfarbe und etwas Abstand um den Text. Es gibt zwei <p>-Elemente in unserem Beispiel-HTML, und beide erhalten das Styling.

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

Versuchen Sie, mit dem obigen Beispiel zu spielen. Drücken Sie dazu die Schaltfläche "Play" in der oberen rechten Ecke, um es in unserem MDN Playground-Editor zu laden.

Tun Sie Folgendes:

1. Fügen Sie einen weiteren Absatz von Text unterhalb der beiden vorhandenen hinzu und beachten Sie, wie die zweite CSS-Regel automatisch auf den neuen Absatz angewendet wird.
2. Fügen Sie eine <h2>-Zwischenüberschrift irgendwo unterhalb der <h1> ein, vielleicht nach einem der Absätze.
3. Versuchen Sie, den <h2>-Elementen eine andere Farbe zu geben, indem Sie eine neue Regel zum CSS hinzufügen. Machen Sie eine Kopie der h1-Regel, ändern Sie den Selektor zu h2 und ändern Sie den color-Wert von red zu purple, zum Beispiel.
4. Wenn Sie sich abenteuerlustig fühlen, versuchen Sie, einige neue CSS-Eigenschaften und Werte in der MDN CSS-Referenz nachzuschlagen, um sie Ihren Regeln hinzuzufügen!

Für zusätzliche Übung mit den Grundlagen von CSS, siehe Schreiben Sie Ihre ersten Zeilen von CSS! von Scrimba ^{MDN-Lernpartner}. Dieser Scrim bietet einen nützlichen Überblick über die grundlegende CSS-Syntax und bietet eine interaktive Herausforderung, bei der Sie etwas mehr Übung im Schreiben von CSS-Deklarationen erhalten können.

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

• Übersicht: Grundlagen der CSS-Gestaltung
• Weiter