Was ist CSS?

Im HTML-Kurs geht es darum, was ein Inhalt ist: eine Überschrift, ein Absatz, ein Link. Hier geht es darum, wie er aussieht. Dafür gibt es eine eigene Sprache, und sie heißt CSS, Cascading Style Sheets.

Das Bild aus dem HTML-Kurs trägt weiter: HTML ist der Rohbau, CSS die Einrichtung. Die Wände stehen, jetzt entscheidest du über Farbe, Abstände und darüber, was neben was steht.

01 / 05Der Browser hat schon eine Meinung

Bevor du irgendetwas schreibst, ein Punkt, an dem viele Erklärungen zu schnell vorbeigehen. Schau dir das erste Beispiel an.

<h1>Mario Laurich</h1>
<p class="rubrik">Webentwicklung</p>
<div class="karte">
  <h2>Über mich</h2>
  <p>Ich baue seit zwanzig Jahren Webseiten und erkläre seit ein paar Jahren, wie das geht.</p>
  <a href="/kontakt">Schreib mir</a>
</div>

Hier steht keine einzige Zeile CSS, und trotzdem ist die Überschrift groß und fett, der Link blau und unterstrichen, zwischen den Absätzen ist Luft. Das kommt nicht aus dem Nichts. Jeder Browser bringt ein eigenes Stylesheet mit, das sogenannte User-Agent-Stylesheet, und das legt für jedes Element eine Grundausstattung fest.

Merk dir den Satz, er erspart dir später viel Rätselraten: eine Seite ohne eigenes CSS ist nicht unformatiert, sie ist browser-formatiert. Dein CSS fängt nie bei null an. Es überschreibt etwas, das schon da ist.

Das kannst du nachsehen, statt es mir zu glauben. Auf einem breiten Bildschirm sitzt in der Browser-Leiste ein Fadenkreuz, das ist der Inspector. Schalt ihn ein und fahr über die Überschrift: unter der Seite geht ein Streifen mit Messwerten auf, der Auskunftsstreifen. Dort steht font-size: 32px, font-weight: 700, ein margin von rund 21px und font-family: "Times New Roman". Geschrieben hat das niemand. Der Absatz darunter hat margin: 16px 0px, der body ringsum margin: 8px, und der Link ist rgb(0, 0, 238). Das ist die Grundausstattung, von der eben die Rede war, in Zahlen statt in Worten.

Genau deshalb wirst du in diesem Kurs regelmäßig Dinge zurücksetzen, statt sie zu setzen. Der Punkt vor einem Listeneintrag, der Abstand um den Seiteninhalt, der Rahmen um ein Eingabefeld: das alles ist eine Voreinstellung, die du übernehmen oder abbestellen kannst.

02 / 05Fünf Regeln reichen für den ersten Unterschied

Jetzt kommt eine zweite Datei dazu.

<h1>Mario Laurich</h1>
<p class="rubrik">Webentwicklung</p>
<div class="karte">
  <h2>Über mich</h2>
  <p>Ich baue seit zwanzig Jahren Webseiten und erkläre seit ein paar Jahren, wie das geht.</p>
  <a href="/kontakt">Schreib mir</a>
</div>

body {
  font-family: system-ui, sans-serif;
  color: #18181b;
}

h1 {
  font-size: 40px;
  margin-bottom: 4px;
}

.rubrik {
  text-transform: uppercase;
  color: #71717a;
}

.karte {
  border: 1px solid #e4e4e7;
  padding: 24px;
}

.karte h2 {
  margin-top: 0;
  font-size: 20px;
}

Am Markup hat sich nichts geändert, wirklich gar nichts. Dieselbe Überschrift, dieselbe Karte, derselbe Link. Was sich geändert hat, steht ausschließlich in styles.css.

Das ist die eigentliche Idee hinter der Trennung: Bedeutung und Darstellung liegen in getrennten Dateien. Der Text der Seite muss nicht angefasst werden, wenn das Aussehen sich ändert. Umgekehrt genauso. Wer schon einmal eine Seite umgestaltet hat, ohne eine einzige Zeile Inhalt anzurühren, weiß, warum das viel wert ist.

Der Inspector zeigt an denselben Stellen jetzt andere Zahlen: die Überschrift steht auf font-size: 40px statt auf 32, die Schrift heißt system-ui, sans-serif statt Times New Roman, und die Rubrik hat color: rgb(113, 113, 122). Dieselben Elemente, dieselben Zeilen im Streifen, andere Werte. Genau das meint „überschreiben”.

Probier ruhig etwas aus. Änder #71717a in #dc2626 und schau, was mit der Rubrik passiert, im Bild wie im Streifen. Setz beim Innenabstand 48px statt 24px. Die Seite läuft sofort mit, kaputt machen kannst du nichts.

03 / 05Und mit etwas mehr Mühe

Fünf Regeln sind ein Anfang. Das dritte Beispiel zeigt dieselbe Seite mit einem Stylesheet, wie es am Ende dieses Kurses aus deiner Hand kommen könnte.

<h1>Mario Laurich</h1>
<p class="rubrik">Webentwicklung</p>
<div class="karte">
  <h2>Über mich</h2>
  <p>Ich baue seit zwanzig Jahren Webseiten und erkläre seit ein paar Jahren, wie das geht.</p>
  <a href="/kontakt">Schreib mir</a>
</div>

body {
  font-family: system-ui, sans-serif;
  color: #18181b;
  line-height: 1.6;
  max-width: 34rem;
  margin: 0 auto;
  padding: 32px 16px;
}

h1 {
  font-size: 40px;
  line-height: 1.1;
  margin-bottom: 4px;
}

.rubrik {
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 13px;
  color: #71717a;
  margin-top: 0;
}

.karte {
  border: 1px solid #e4e4e7;
  border-radius: 12px;
  padding: 24px;
  background-color: #fafafa;
}

.karte h2 {
  margin-top: 0;
  font-size: 20px;
}

.karte a {
  display: inline-block;
  margin-top: 8px;
  background-color: #2563eb;
  color: #ffffff;
  text-decoration: none;
  padding: 10px 18px;
  border-radius: 8px;
}

Nichts davon ist Zauberei, und du musst jetzt auch nichts davon verstehen. Es sind rund vierzig Zeilen, und jede einzelne davon kommt in den nächsten Abschnitten dran: Farben, Abstände, Schriftgrößen, Rahmen, abgerundete Ecken, ein Link, der wie ein Knopf aussieht.

Was ich dir zeigen will, ist das Verhältnis. Der Unterschied zwischen dem ersten und dem dritten Beispiel ist groß, der Aufwand dahinter überschaubar. CSS hat den Ruf, unberechenbar zu sein, und dieser Ruf kommt fast nie von einzelnen Eigenschaften. Er kommt davon, dass mehrere zusammenwirken und man nicht sieht, welche gerade gewinnt. Genau darum geht es in diesem Kurs, und deshalb bauen wir ab Abschnitt 2 Stück für Stück ein Verständnis dafür auf, statt Eigenschaften auswendig zu lernen.

04 / 05Womit du hier arbeitest

Der Inspector von eben ist das Werkzeug, das du in diesem Kurs am häufigsten brauchst, weil er die einzige ehrliche Antwort auf die Frage gibt, was am Ende wirklich gilt.

Der Auskunftsstreifen hat dafür zwei Reiter. In Werte stehen die Zahlen von eben, also das Ergebnis. In Regeln steht, woher es kommt: jede Regel aus deinem Stylesheet, die dieses Element meint, die gewinnende oben, überstimmte Zeilen durchgestrichen mit dem Grund daneben. Im ersten Beispiel dieser Lektion steht dort nur ein Satz, nämlich dass keine Regel von dir etwas über dieses Element sagt und du die Vorgaben des Browsers siehst. Im zweiten steht h1 mit seinen zwei Zeilen. Ab Lektion 1.4 brauchst du diesen Reiter, und in Abschnitt 3 arbeitest du fast nur damit.

Drei Sachen liegen noch daneben, und mehr musst du fürs Erste nicht wissen.

In derselben Browser-Leiste sitzt neben dem Fadenkreuz das Vollbild. Darin klappt die Viewport-Leiste auf, in der du die Breite der Seite einstellst. Ab Abschnitt 12 dreht sich alles darum, aber auch vorher sind einzelne Beispiele für mehr Breite gebaut, als deine Spalte hat; über der Seite steht dann, für welche, und das Vollbild stellt genau diese Breite von allein ein. Schneller geht es ohne Vollbild: zieh die Trennlinie zwischen Editor und rechter Spalte nach links, dann wird die Seite breiter.

Das alles gibt es nur auf einem breiten Bildschirm, ab 1280 Pixeln. Auf dem Handy fehlen Inspector, Vollbild, Viewport-Leiste und Trennlinie, und auf einem Tablet quer auch; dort füllt eine Fläche den Schirm, und du schaltest unten zwischen Lektion, Code und Browser um. Lösbar bleibt trotzdem jede Aufgabe. Geprüft wird immer in der Breite, die über der Seite steht, egal wie breit dein Bildschirm gerade ist; nur das Bild daneben zeigt dann die schmale Fassung, und ein „geh ins Vollbild” in einer Aufgabe heißt für dich „stell es dir breit vor”. Wo eine Aufgabe sagt, was der Inspector zeigen würde, steht der Befund gleich daneben im Satz, du verpasst also nichts, was du zum Lösen brauchst.

Neben dem Reiter „Browser” liegen zwei weitere. Im Reiter „Netzwerk” stehen die Dateien, aus denen die Seite gebaut ist, meistens genau zwei: index.html und styles.css, beide mit dem Vermerk „aus der Aufgabe”, weil die Lektionsansicht sie selbst zusammensetzt. Sobald dein CSS ein Bild nachlädt, kommt dessen Zeile dazu, mit Größe und mit der Auskunft, ob es angekommen ist. Ab Abschnitt 7 arbeitest du damit. Der Reiter „Console” bleibt in diesem Kurs fast immer leer, CSS gibt ja nichts aus. Ganz unten darin sitzt trotzdem eine Eingabezeile, in der du dem Browser eine Frage zu deiner Seite stellen kannst. Dreimal in diesem Kurs ist das die einzige Antwort: in Lektion 6.4 und zweimal in Abschnitt 9, jedes Mal bei derselben Frage, nämlich ob das, was du siehst, auch im Dokument steht.

05 / 05Was du in diesem Kurs baust

Über alle sechzehn Abschnitte entsteht dieselbe Seite: ein Portfolio mit klebender Kopfzeile, einem Hero mit Bild, einem Raster aus Projektkarten, einem Bereich über dich, einem Kontaktformular und einer Fußzeile. Ab dem nächsten Abschnitt kommt am Ende jedes Abschnitts ein Stück davon dazu; in diesem hier geht es erst einmal darum, CSS überhaupt anzuschalten.

Diese Lektion hat als einzige in diesem Abschnitt keine Aufgabe. Es gibt hier nichts zu prüfen, was in der nächsten Lektion nicht besser aufgehoben wäre. Spiel mit den drei Beispielen, dann geht es los.