Was ist CSS?

Im Modul Inhalte mit HTML strukturieren haben wir darüber gesprochen, was HTML ist und wie es genutzt wird, um Dokumente zu markieren. Diese Dokumente sind in einem Webbrowser lesbar. Überschriften erscheinen größer als regulärer Text, Absätze brechen in eine neue Zeile um und haben Abstände dazwischen. Links sind farbig und unterstrichen, um sie vom übrigen Text zu unterscheiden.

Was Sie sehen, sind die Standardstile des Browsers — sehr grundlegendes Styling, das der Browser auf HTML anwendet, um sicherzustellen, dass die Seite grundsätzlich lesbar ist, auch wenn vom Seitenautor kein explizites Styling angegeben wurde. Diese Stile sind in Standard-CSS-Stylesheets definiert, die im Browser integriert 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 kontrollieren, wie HTML-Elemente im Browser aussehen, und Ihre Dokumente mit beliebigem Design und Layout Ihren Nutzern präsentieren.

• Ein Dokument ist üblicherweise eine Textdatei, die mit einer Auszeichnungssprache strukturiert ist, am häufigsten HTML (diese nennt man HTML-Dokumente). Sie könnten auch auf Dokumente stoßen, die in anderen Auszeichnungssprachen wie SVG oder XML geschrieben sind. Während wir zuvor von Webseiten gesprochen haben, enthält ein HTML-Dokument die Inhalte der Webseite und spezifiziert deren Struktur.
• Präsentation eines Dokuments für einen Nutzer bedeutet, es in eine Form umzuwandeln, die von Ihrer Zielgruppe nutzbar ist. Browser wie Firefox, Chrome, Safari und Edge sind so gestaltet, dass sie Dokumente visuell präsentieren, z. B. 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 Wie Browser Websites laden bereitgestellt.

CSS kann für viele Zwecke verwendet werden, die das Aussehen und Verhalten Ihrer Webseite betreffen. Die wichtigsten sind:

• Text-Styling, zum Beispiel, um die Farbe und Größe von Überschriften und Links zu ändern.
• Erstellung von Layouts, zum Beispiel, indem Sie aus einer einzigen Textspalte ein mehrspaltiges Layout machen.
• Spezialeffekte wie Animationen.

Die CSS-Sprache ist in Module organisiert, die verwandte Funktionalitäten enthalten. Sehen Sie sich beispielsweise die MDN-Referenzseiten für das Modul Hintergründe und Rahmen an, um herauszufinden, welchen Zweck es hat und welche Eigenschaften und Funktionen es enthält. In diesem Modul finden Sie ebenfalls 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.

Sie könnten beispielsweise entscheiden, die Hauptüberschrift 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 beginnt die CSS-Regel mit einem Selector. Dieser selektiert die HTML-Elemente, die wir stylen möchten. In diesem Fall stylen wir Überschriften der Ebene 1 (<h1>).
• Danach folgen geschweifte Klammern — { }.
• Innerhalb der Klammern stehen eine oder mehrere Deklarationen, die aus Eigenschafts- und Wertepaaren bestehen. Wir geben die Eigenschaft (zum Beispiel color im obigen Beispiel) vor dem Doppelpunkt an und den Wert der Eigenschaft nach dem Doppelpunkt (red wird hier zum Beispiel als Wert für die Eigenschaft color gesetzt).
• 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 sich schnell einige Werte merken, 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, erhält der Browser, wenn Sie eine Webseite aufrufen, zuerst das HTML-Dokument, welches den Inhalt der Webseite enthält, und konvertiert es in einen DOM-Baum.

Danach werden alle CSS-Regeln, die in der Webseite gefunden werden (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 sollen (wie durch ihre Selektoren festgelegt). Die CSS-Regeln werden dann auf den DOM-Baum angewendet, was zu einem Render-Baum führt, der dann im Browserfenster dargestellt wird.

Lassen Sie uns ein Beispiel betrachten. Zuerst definieren wir einen HTML-Ausschnitt, auf den die CSS-Regeln angewendet werden können:

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

• Selektiert alle <h1>-Elemente auf der Seite und färbt deren Text rot und macht ihn größer als die Standardgröße. Da es in unserem Beispiel-HTML nur ein <h1> gibt, wird nur dieses Element das Styling erhalten.
• Selektiert alle <p>-Elemente auf der Seite und gibt ihnen eine benutzerdefinierte Text- und Hintergrundfarbe sowie Abstände 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:

Jetzt, da Sie ein gewisses Verständnis dafür haben, was CSS ist und wie es funktioniert, fahren wir mit praktischen Übungen im Schreiben von CSS fort und erklären die Syntax im Detail.

• Übersicht: Grundlagen der CSS-Stilgestaltung
• Weiter