Einheit 02

CSS-Grundlagen

Cascading Style Sheets — Inhalt und Darstellung trennen

Webentwicklung & Agentic Coding — Universität Graz, SS 2026

Willkommen zur zweiten Einheit. Heute geht es um CSS — die Sprache, mit der wir HTML-Dokumente visuell gestalten. Wir bauen auf Einheit 01 auf, wo wir HTML gelernt haben.

Was ist CSS?

CSS steht für Cascading Style Sheets und ist die Sprache, mit der wir das Aussehen von HTML-Dokumenten definieren.

HTML = Struktur und Inhalt (Was steht auf der Seite?)
CSS = Darstellung und Design (Wie sieht es aus?)

Grundprinzip: Trennung von Inhalt und Darstellung. Dasselbe HTML kann mit unterschiedlichem CSS völlig anders aussehen.

CSS wurde 1996 vom W3C eingeführt. Die aktuelle Version ist CSS3, die modular aufgebaut ist und ständig erweitert wird.

Erklären Sie das Prinzip der Trennung anhand eines Beispiels: Eine Webseite ohne CSS zeigt nur Rohtext mit Standard-Browser-Styles. Mit CSS wird daraus eine gestaltete Seite. Vergleich: Ein Manuskript (HTML) und das fertige Buch-Layout (CSS).

CSS einbinden

CSS einbinden: Drei Wege

1. Inline-Style

<p style="color: red;
   font-size: 18px;">
  Roter Text
</p>

Direkt am Element. Nur für Einzelfälle.

2. Style-Tag im Head

<head>
  <style>
    p { color: red; }
  </style>
</head>

Für einzelne Seiten brauchbar.

3. Externes Stylesheet (empfohlen)

<head>
  <link rel="stylesheet" href="style.css">
</head>

Getrennte Datei — wiederverwendbar, wartbar, cachebar.

Betonen Sie, dass externe Stylesheets der Standard sind. Inline-Styles vermeiden wir in der Regel, weil sie die Trennung von Inhalt und Darstellung aufheben. Style-Tags eignen sich für Prototypen oder einzelne Seiten. In der Praxis verlinken wir immer eine .css-Datei.

Selektoren

Selektoren: Element, Klasse, ID

Element-Selektor

p {
  color: navy;
}
/* Trifft ALLE <p>-Elemente */

Klassen-Selektor

.wichtig {
  font-weight: bold;
  color: red;
}
/* Trifft class="wichtig" */

ID-Selektor

#haupttitel {
  font-size: 2rem;
  border-bottom: 2px solid navy;
}
/* Trifft id="haupttitel" — nur einmal pro Seite! */

Merke: Element = p | Klasse = .name | ID = #name

Elemente betreffen alle gleichnamigen Tags. Klassen sind wiederverwendbar (mehrere Elemente können dieselbe Klasse haben). IDs sind einmalig pro Seite. In der Praxis verwenden wir hauptsächlich Klassen, weil sie flexibel und wiederverwendbar sind.

Selektoren

Selektoren kombinieren

/* Nachfahren-Selektor: p innerhalb von .brief */
.brief p {
  line-height: 1.8;
}

/* Direktes Kind: nur direkte <li> von .navigation */
.navigation > li {
  display: inline-block;
}

/* Mehrere Selektoren gleichzeitig */
h1, h2, h3 {
  font-family: Georgia, serif;
}

/* Klasse + Element kombiniert */
p.hervorhebung {
  background: yellow;
}

/* Mehrere Klassen auf einem Element */
.karte.aktiv {
  border-color: blue;
}

Nachfahren-Selektoren (mit Leerzeichen) sind besonders wichtig. Sie erlauben uns, Styles nur in einem bestimmten Kontext anzuwenden. Die Kombination von Selektoren ist ein mächtiges Werkzeug, um spezifische Elemente anzusprechen, ohne überall Klassen setzen zu müssen.

Kaskade

Kaskade und Spezifität

Was passiert, wenn mehrere CSS-Regeln auf dasselbe Element zutreffen? Der Browser entscheidet nach diesen Regeln:

Herkunft: Autor-CSS schlägt Browser-Defaults
Spezifität: Je spezifischer der Selektor, desto stärker
Reihenfolge: Bei gleicher Spezifität gewinnt die spätere Regel

Spezifitäts-Hierarchie (aufsteigend):
Element (p) < Klasse (.text) < ID (#titel) < Inline-Style < !important

p          { color: black; }   /* Spezifität: 0-0-1 */
.absatz    { color: blue;  }   /* Spezifität: 0-1-0 */
#intro     { color: green; }   /* Spezifität: 1-0-0 */

/* Ein <p class="absatz" id="intro"> wird grün */

Spezifität wird als Zahlentripel berechnet: (IDs, Klassen, Elemente). Vermeiden Sie !important — es ist ein Zeichen für schlecht organisiertes CSS. Lieber spezifischere Selektoren oder die Reihenfolge der Regeln nutzen.

Syntax

CSS-Syntax im Detail

selektor {
  eigenschaft: wert;
  eigenschaft: wert;
}

/* Konkretes Beispiel: */
.brief-absatz {
  font-family: Georgia, serif;
  font-size: 1.1rem;
  line-height: 1.8;
  color: #333333;
  margin-bottom: 1rem;
}

Selektor: Welche Elemente sollen gestylt werden?
Eigenschaft: Was soll geändert werden? (z.B. color, font-size)
Wert: Wie soll es aussehen? (z.B. red, 16px)
Jede Deklaration endet mit einem Semikolon (;)
Kommentare: /* Das ist ein Kommentar */

Häufige Anfängerfehler: Semikolon vergessen, geschweifte Klammer nicht geschlossen, Doppelpunkt statt Semikolon oder umgekehrt. Die DevTools helfen, solche Fehler schnell zu finden, weil fehlerhafte Deklarationen durchgestrichen angezeigt werden.

Farben

Farben in CSS

CSS kennt mehrere Formate, um Farben zu definieren:

/* Benannte Farben (147 vordefiniert) */
color: red;
color: cornflowerblue;

/* Hexadezimal: #RRGGBB */
color: #ff0000;      /* Rot */
color: #1a5276;      /* Dunkelblau */
color: #333;         /* Kurzform für #333333 */

/* RGB: rot, grün, blau (0–255) */
color: rgb(255, 0, 0);
color: rgba(26, 82, 118, 0.8);  /* mit Transparenz */

/* HSL: Farbton (0-360), Sättigung, Helligkeit */
color: hsl(0, 100%, 50%);       /* Rot */
color: hsla(200, 65%, 28%, 0.9); /* mit Transparenz */

Tipp: HSL ist besonders intuitiv — Sie drehen am Farbrad (Hue), regeln die Sättigung und die Helligkeit. Ideal, wenn Sie Farbvarianten erzeugen möchten.

Zeigen Sie die Browser-DevTools: Man kann Farbwerte direkt im Inspektor anklicken und bekommt einen Farbwähler. Das ist sehr hilfreich zum Experimentieren. Für DH-Projekte: Farbpaletten historischer Dokumente können mit der Pipette extrahiert werden.

Typografie

Typografie mit CSS

body {
  /* Schriftfamilie mit Fallbacks */
  font-family: Georgia, 'Times New Roman', serif;

  /* Schriftgröße */
  font-size: 16px;        /* Pixel (absolut) */
  font-size: 1.1rem;      /* Relativ zum Root-Element */

  /* Schriftstärke */
  font-weight: normal;    /* oder 400 */
  font-weight: bold;      /* oder 700 */

  /* Zeilenabstand */
  line-height: 1.6;       /* Ohne Einheit = Faktor */

  /* Textausrichtung */
  text-align: left;       /* left, center, right, justify */

  /* Weitere Eigenschaften */
  font-style: italic;
  text-decoration: underline;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

Für Fließtext: Serifenschriften (Georgia, Times) eignen sich gut für längere Texte. Sans-Serif (Arial, Helvetica) wirkt moderner. Monospace (Consolas) für Code.

Erwähnen Sie die Typografie-Regel: 1.5 bis 1.8 Zeilenabstand für Fließtext. Max. 60-80 Zeichen pro Zeile (max-width: 65ch). Zwei bis drei Schriftfamilien pro Seite sind genug. In den DH ist gute Typografie besonders wichtig für Lesbarkeit historischer Texte.

Box-Model

Das Box-Model

Jedes HTML-Element ist eine rechteckige Box mit vier Schichten:

+--------------------------------------------+
|               MARGIN (Außenabstand)        |
|  +--------------------------------------+  |
|  |          BORDER (Rahmen)             |  |
|  |  +--------------------------------+  |  |
|  |  |       PADDING (Innenabstand)   |  |  |
|  |  |  +---------------------------+ |  |  |
|  |  |  |                           | |  |  |
|  |  |  |        CONTENT            | |  |  |
|  |  |  |     (Inhalt: Text,        | |  |  |
|  |  |  |      Bilder etc.)         | |  |  |
|  |  |  |                           | |  |  |
|  |  |  +---------------------------+ |  |  |
|  |  +--------------------------------+  |  |
|  +--------------------------------------+  |
+--------------------------------------------+

Von innen nach außen: Content → Padding → Border → Margin

Das Box-Model ist DAS zentrale Konzept für CSS-Layout. Erklären Sie, dass die Standard-Berechnung (content-box) die Breite nur auf den Inhalt bezieht. Mit box-sizing: border-box bezieht sich width auf Content + Padding + Border, was meist intuitiver ist.

Box-Model

Box-Model in der Praxis

Padding (Innenabstand)

.karte {
  /* Alle Seiten gleich */
  padding: 20px;

  /* Oben/Unten  Links/Rechts */
  padding: 10px 20px;

  /* Oben Rechts Unten Links */
  padding: 10px 20px 10px 20px;

  /* Einzeln */
  padding-top: 10px;
  padding-left: 20px;
}

Padding erzeugt Platz zwischen Inhalt und Rahmen.

Margin (Außenabstand)

.karte {
  /* Alle Seiten gleich */
  margin: 20px;

  /* Horizontale Zentrierung */
  margin: 0 auto;

  /* Einzeln */
  margin-bottom: 2rem;

  /* Negative Werte möglich */
  margin-top: -10px;
}

Margin erzeugt Platz zwischen Elementen. Vertikale Margins kollabieren!

Margin Collapsing erklären: Wenn zwei vertikale Margins aufeinandertreffen (z.B. margin-bottom eines Absatzes und margin-top des nächsten), werden sie nicht addiert, sondern der größere Wert gewinnt. Das ist häufig verwirrend für Anfänger.

Display

display: block, inline, inline-block

block

div, p, h1, section {
  display: block;
}
/* Nimmt volle Breite ein.
   Beginnt auf neuer Zeile.
   Width/Height wirken. */

inline

span, a, strong, em {
  display: inline;
}
/* Nur so breit wie Inhalt.
   Bleibt im Textfluss.
   Width/Height ignoriert! */

inline-block

.tag {
  display: inline-block;
  /* Bleibt im Textfluss wie inline,
     aber Width/Height wirken wie bei block.
     Ideal für Buttons, Tags, Badges. */
  padding: 4px 12px;
  border: 1px solid #ccc;
}

Den Unterschied am besten live in den DevTools zeigen. Zwei div-Elemente stehen untereinander (block). Zwei span-Elemente stehen nebeneinander (inline). inline-block kombiniert beides. Später werden wir Flexbox und Grid kennenlernen, die noch mächtiger sind.

Dimensionen

Breite und Höhe

.brief {
  /* Feste Breite */
  width: 600px;

  /* Maximale Breite (responsive!) */
  max-width: 800px;
  width: 100%;    /* Nimmt verfügbare Breite, aber maximal 800px */

  /* Mindestbreite */
  min-width: 300px;

  /* Höhe (meist vermeiden!) */
  height: auto;   /* Default: passt sich dem Inhalt an */
  min-height: 400px; /* Mindesthöhe */

  /* Box-Sizing für intuitive Berechnung */
  box-sizing: border-box;
  /* width = content + padding + border */
}

Best Practice: Verwenden Sie max-width statt width für responsives Design. Vermeiden Sie feste height-Werte — lassen Sie den Inhalt die Höhe bestimmen.

box-sizing: border-box ist heute Standard und wird oft global gesetzt: *, *::before, *::after { box-sizing: border-box; } Ohne border-box wird padding zur width addiert, was die Berechnung schwierig macht.

Hintergründe

/* Einfache Hintergrundfarbe */
.brief {
  background-color: #FFFFF8;
}

/* Hintergrundbild */
.briefkopf {
  background-image: url('pergament.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Farbverlauf (Gradient) */
.header {
  background: linear-gradient(
    to bottom,
    #1a5276,
    #2980b9
  );
}

/* Kurzform: alles in einer Zeile */
.banner {
  background: #f5f5f0 url('muster.png') repeat center;
}

Für DH-Projekte sind Hintergrundbilder besonders interessant — man kann z.B. ein Pergament-Muster als Hintergrund für einen historischen Brief verwenden. Gradients sind nützlich für dekorative Elemente und Header-Bereiche.

Rahmen

Rahmen: border, border-radius, box-shadow

/* Border (Rahmen) */
.karte {
  border: 1px solid #ddd;         /* Breite, Stil, Farbe */
  border-bottom: 3px solid navy;  /* Nur unten */
}

/* Border-Radius (abgerundete Ecken) */
.karte {
  border-radius: 8px;             /* Alle Ecken */
  border-radius: 50%;             /* Kreisform */
}

/* Box-Shadow (Schatten) */
.karte {
  /* X-Versatz  Y-Versatz  Unschärfe  Farbe */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Kombination: Elegante Karte */
.brief-karte {
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  padding: 2rem;
  background: white;
}

Die Kombination von border, border-radius und box-shadow erzeugt den typischen Karten-Effekt moderner Webseiten. Zeigen Sie auch border-style-Varianten: solid, dashed, dotted, double.

Pseudo-Klassen

Pseudo-Klassen sprechen Elemente in einem bestimmten Zustand an:

/* :hover — wenn die Maus über dem Element ist */
a:hover {
  color: #0000ff;
  text-decoration: none;
}

.karte:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
  transition: all 0.2s ease;
}

/* :first-child / :last-child */
li:first-child {
  font-weight: bold;
}

li:last-child {
  border-bottom: none;
}

/* :nth-child() — jedes zweite Element */
tr:nth-child(even) {
  background: #f9f9f9;
}

/* :focus — wenn ein Formularfeld aktiv ist */
input:focus {
  outline: 2px solid #1a5276;
  border-color: #1a5276;
}

:hover ist besonders wichtig für interaktive Elemente. Zeigen Sie die transition-Eigenschaft: Sie sorgt für sanfte Übergänge statt abrupter Änderungen. Die transition-Eigenschaft wird auf dem Grundzustand definiert, nicht auf dem :hover-Zustand.

CSS-Variablen

CSS-Variablen (Custom Properties)

/* Variablen definieren (meist auf :root) */
:root {
  --farbe-primaer: #1a5276;
  --farbe-sekundaer: #2980b9;
  --farbe-akzent: #c0392b;
  --farbe-hintergrund: #fffff8;
  --schrift-text: Georgia, serif;
  --abstand: 1.5rem;
}

/* Variablen verwenden mit var() */
h1 {
  color: var(--farbe-primaer);
  font-family: var(--schrift-text);
}

.button {
  background: var(--farbe-sekundaer);
  padding: var(--abstand);
}

/* Fallback-Wert angeben */
.element {
  color: var(--farbe-unbekannt, black);
}

Vorteil: Eine Farbe ändern — und die ganze Seite passt sich an. Ideal für DH-Projekte mit konsistenten Farbpaletten.

CSS-Variablen (Custom Properties) sind ein modernes CSS-Feature, das die Wartbarkeit enorm verbessert. Sie können auch in Media Queries neu gesetzt werden. Beispiel: Ein DH-Projekt könnte eine Farbpalette definieren, die zum historischen Kontext passt. Bei einer anderen Sammlung ändert man nur die Variablen-Werte.

Responsive Design

Responsive Design: Was und warum?

Webseiten werden auf verschiedensten Geräten betrachtet: Smartphones, Tablets, Laptops, große Monitore.

Responsive Design = das Layout passt sich der Bildschirmgröße an
Statt separate Seiten für Mobil und Desktop: eine Seite, die sich anpasst
Seit 2015 ein zentrales Ranking-Kriterium bei Google

Drei Säulen des Responsive Design:

Flexible Layouts (%, max-width statt feste px)
Media Queries (Regeln für bestimmte Bildschirmgrößen)
Relative Einheiten (rem, em, %, vw, vh)

Zeigen Sie verschiedene Geräte: Handy-Bildschirm vs. 27-Zoll-Monitor. Mobile-First-Ansatz erklären: Zuerst für kleine Bildschirme designen, dann für größere erweitern. Das ist einfacher als umgekehrt.

Responsive Design

Viewport Meta-Tag und Media Queries

Schritt 1: Der Viewport Meta-Tag im HTML-Head:

<meta name="viewport"
      content="width=device-width, initial-scale=1.0">
/* Ohne diesen Tag ignorieren mobile Browser responsive CSS! */

Schritt 2: Media Queries — CSS-Regeln für bestimmte Bildschirmgrößen:

/* Standard: Styles für alle Größen */
.brief {
  max-width: 800px;
  padding: 2rem;
  font-size: 1.1rem;
}

/* Ab 768px Breite oder kleiner: */
@media (max-width: 768px) {
  .brief {
    padding: 1rem;
    font-size: 1rem;
  }
}

/* Ab 480px Breite oder kleiner: */
@media (max-width: 480px) {
  .brief {
    padding: 0.5rem;
    font-size: 0.9rem;
  }
}

Der Viewport-Tag ist essentiell. Ohne ihn rendern Smartphones die Seite in voller Desktop-Breite und zoomen dann raus. Die Media Queries werden am Ende der CSS-Datei platziert und überschreiben die Standard-Regeln für kleinere Bildschirme.

Responsive Design

Relative Einheiten

Absolute Einheiten

/* px — Pixel */
font-size: 16px;
width: 800px;
padding: 20px;

/* Probleme:
   - Skaliert nicht
   - Unflexibel bei
     verschiedenen
     Bildschirmgrößen */

Relative Einheiten

/* rem — relativ zur Root-Fontsize */
font-size: 1.1rem;   /* 17.6px */

/* em — relativ zum Elternelement */
padding: 1.5em;

/* % — Prozent des Elternelements */
width: 100%;
max-width: 50rem;

/* vw/vh — Viewport-Einheiten */
width: 100vw;   /* Volle Breite */
height: 100vh;  /* Volle Höhe */

Empfehlung: rem für Schriftgrößen und Abstände, % und max-width für Layouts, vw/vh für Vollbild-Elemente.

rem ist der sicherste Weg für responsive Typografie. Wenn man html { font-size: 16px } setzt, dann ist 1rem = 16px, 1.5rem = 24px etc. Der Vorteil: Ändert man den Root-Wert, skaliert alles proportional mit. em dagegen kaskadiert — was zu unerwarteten Größen führen kann.

Praxis

Praxis: Brief-Layout mit CSS

Vorher (nur HTML)

<div class="brief">
  <div class="absender">
    Hugo Schuchardt
    Elisabethstr. 6
    Graz
  </div>
  <div class="datum">
    12. Jänner 1882
  </div>
  <div class="anrede">
    Verehrter Herr Kollege!
  </div>
  <p>Inhalt des Briefes...</p>
  <div class="gruss">
    Ihr ergebenster
    Hugo Schuchardt
  </div>
</div>

Nachher (mit CSS)

.brief {
  max-width: 700px;
  margin: 2rem auto;
  padding: 3rem;
  background: #fffff8;
  border: 1px solid #ccc;
  font-family: Georgia, serif;
  line-height: 1.8;
  box-shadow: 0 2px 8px
    rgba(0,0,0,0.1);
}
.absender {
  text-align: right;
  font-style: italic;
  color: #555;
}
.datum {
  text-align: right;
  margin: 1rem 0 2rem;
}
.anrede {
  font-weight: bold;
  margin-bottom: 1rem;
}
.gruss {
  margin-top: 2rem;
  font-style: italic;
}

Dieses Beispiel ist die Basis für die Übung. Die Studierenden werden einen ähnlichen Brief in der Übung selbst stylen. Zeigen Sie den Unterschied im Browser: Links der rohe HTML-Text, rechts die gestaltete Version.

Agentic Coding

Agentic Coding: CSS mit LLM generieren

Statt CSS auswendig zu lernen, beschreiben Sie das gewünschte Design:

Beispiel-Prompt:
„Erstelle CSS für einen historischen Brief. Der Brief soll auf einem cremefarbenen Hintergrund stehen, mit Serifenschrift, einem feinen Rahmen und einem leichten Schatten. Der Absender steht rechtsbündig, die Anrede ist fett. Der Brief soll maximal 700px breit und horizontal zentriert sein.“

Prompt Engineering (PE): Je präziser die Beschreibung, desto besser das Ergebnis
Code Literacy (CL): Den generierten Code lesen und verstehen können
Immer prüfen: Macht der generierte Code das, was ich wollte?

/* Vom LLM generiert — können Sie diesen Code lesen? */
.brief {
  max-width: 700px;
  margin: 2rem auto;
  padding: 3rem;
  background-color: #fdf6e3;
  border: 1px solid #c4a35a;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
  font-family: 'Palatino Linotype', Georgia, serif;
  line-height: 1.75;
}

Das ist der Kern des Agentic-Coding-Ansatzes: Beschreiben statt Auswendiglernen. Aber Code Literacy bleibt wichtig — man muss den generierten Code verstehen können, um Fehler zu finden und Anpassungen vorzunehmen. Die Studierenden sollen den Prompt iterieren: Ergebnis prüfen, Prompt verfeinern, erneut generieren.

Werkzeuge

Browser DevTools: CSS inspizieren

Die Browser-Entwicklerwerkzeuge sind unverzichtbar für CSS-Arbeit:

Öffnen: F12 oder Rechtsklick → Element untersuchen
Elements-Panel: HTML-Struktur durchsuchen
Styles-Panel: Alle CSS-Regeln eines Elements sehen
Computed-Tab: Endgültige berechnete Werte
Box-Model-Visualisierung: Margin, Border, Padding, Content grafisch

Tipps:

CSS-Werte direkt im Browser ändern und live sehen (temporär!)
Durchgestrichene Regeln = werden von spezifischeren Regeln überschrieben
Farbwerte anklicken = Farbwähler öffnet sich
Checkbox neben Regeln = ein/ausschalten zum Testen

Live-Demo: Öffnen Sie eine Webseite, inspizieren Sie ein Element, ändern Sie Farben und Abstände live in den DevTools. Zeigen Sie das Box-Model im Computed-Tab. Die Studierenden sollen das direkt mitmachen.

Zusammenfassung

CSS trennt Darstellung von Inhalt — externes Stylesheet verwenden
Selektoren bestimmen, welche Elemente gestylt werden: Element, .Klasse, #ID
Kaskade & Spezifität: ID > Klasse > Element
Box-Model: Content → Padding → Border → Margin
Farben: Hex, RGB, HSL — alle Formate kennen, HSL ist am intuitivsten
Typografie: font-family, font-size (rem!), line-height, text-align
CSS-Variablen: --name: wert; und var(--name)
Responsive: Viewport-Tag, Media Queries, relative Einheiten
DevTools: CSS live inspizieren und testen

Agentic Coding: Design beschreiben → LLM generiert CSS → Code lesen und prüfen → iterieren

Fassen Sie die Kernkonzepte zusammen. Betonen Sie, dass CSS ein breites Thema ist und wir heute die Grundlagen gelegt haben. In der nächsten Einheit werden wir Layout-Techniken wie Flexbox und Grid kennenlernen.

Ausblick

Vorschau: Einheit 03 & Assignment 1

Einheit 03: Vertiefung HTML & CSS — Flexbox, Grid, Formulare, Tabellen

Assignment 1: Erstellen Sie eine persönliche Projektseite mit HTML und CSS. Nutzen Sie ein LLM als Coding-Assistent und dokumentieren Sie Ihre Prompts und Iterationsschritte.

Bis nächste Woche:

Übungen zu Einheit 02 abschließen
Mit den DevTools experimentieren
Assignment 1 Beschreibung lesen

Verweisen Sie auf die Übungen, die die Studierenden eigenständig machen sollen. Assignment 1 wird in Einheit 04 präsentiert. Ermutigen Sie die Studierenden, zwischen den Einheiten mit CSS zu experimentieren und die DevTools zu nutzen.