Was ist CSS?

Eine Seite, für die niemand eine Zeile CSS geschrieben hat, sieht trotzdem nach etwas aus. Die Überschrift ist groß und fett, der Link blau und unterstrichen, und zwischen den Absätzen ist Luft. Wenn du daran etwas ändern willst, brauchst du eine eigene Sprache, und die heißt CSS, Cascading Style Sheets.

Im HTML-Kurs ging es darum, was ein Inhalt ist, eine Überschrift, ein Absatz, ein Link. Hier geht es darum, wie er aussieht. Das Bild aus dem HTML-Kurs passt weiter. HTML ist der Rohbau, CSS die Einrichtung. Die Wände stehen, und jetzt entscheidest du über Farbe, Abstände und darüber, was neben was steht.

01 / 05Der Browser hat schon eine Meinung

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

Das Aussehen im Beispiel kommt nicht aus dem Nichts. Jeder Browser bringt ein eigenes Stylesheet mit, das Browser-Stylesheet (englisch User-Agent-Stylesheet), und darin stehen für jedes Element seine Vorgaben.

Eine Seite ohne eigenes CSS ist also nicht unformatiert. Sie ist vom Browser formatiert. Dein CSS fängt nie bei null an, es überschreibt etwas, das schon da ist.

Glauben musst du mir das nicht, du kannst nachsehen. Auf einem breiten Bildschirm zeigt der Inspector, den du aus dem HTML-Kurs kennst, an der Überschrift im Auskunftsstreifen 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 sind die Vorgaben des Browsers, in Zahlen statt in Worten.

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 und der Rahmen um ein Eingabefeld sind alles Vorgaben, 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 Webseiten und erkläre, 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. Alles, was neu ist, steht in styles.css.

Bedeutung und Darstellung liegen in getrennten Dateien, und das ist die eigentliche Idee dahinter. Wenn sich das Aussehen ändert, muss niemand den Text der Seite anfassen. Umgekehrt genauso.

An denselben Stellen stehen im Inspector jetzt andere Zahlen. Die Überschrift hat font-size: 40px statt 32, die Schrift heißt system-ui, sans-serif statt Times New Roman, und die Rubrik, die kleine Zeile „Webentwicklung“ unter dem Namen, hat color: rgb(113, 113, 122). Dieselben Elemente, dieselben Zeilen im Streifen, andere Werte. Das ist mit „überschreiben“ gemeint.

Du kannst die Beispiele bearbeiten. Steht bei der Rubrik #dc2626 statt #71717a, wird sie rot, auf der Seite wie im Streifen. Mit 48px statt 24px Innenabstand bekommt die Karte sichtbar mehr Luft. Die Seite läuft bei jedem Tastendruck mit.

03 / 05Ein ganzes Stylesheet

Fünf Regeln sind ein Anfang. Im dritten Beispiel steht 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 Webseiten und erkläre, 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;
}

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

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

04 / 05Womit du hier arbeitest

Die Werkzeuge kennst du aus dem HTML-Kurs. Am häufigsten brauchst du hier den Inspector, weil er ehrlich anzeigt, was am Ende wirklich gilt. Was er in diesem Kurs zusätzlich kann, kommt in der Lektion dran, die es braucht.

Inspector und Vollbild gibt es erst ab 1280 Pixeln Bildschirmbreite. Lösbar bleibt jede Aufgabe trotzdem. Wo es auf den Befund des Inspectors ankommt, steht er gleich daneben im Satz.

05 / 05Was du in diesem Kurs baust

Über den Kurs entstehen die Teile eines Portfolios: eine klebende Kopfzeile, ein Hero (der große erste Block der Seite) mit Bild, ein Raster aus Projektkarten, ein Bereich „Über mich“, ein Kontaktformular und eine Fußzeile. Die meisten davon baust du in einer eigenen Synthese am Ende eines Abschnitts. In Abschnitt 16 stehen sie zum ersten Mal auf einer Seite. Die Seite ist meine, und am Ende nimmst du sie als Vorlage für deine eigene mit.

In der Aufgabe zu dieser Lektion änderst du deinen ersten Wert, an der Seite aus dem zweiten Beispiel.