CSS-Grundlagen

In diesem Skriptum lernen Sie die Grundlagen von CSS (Cascading Style Sheets) kennen. CSS ist die Sprache, mit der Sie das Aussehen Ihrer HTML-Dokumente gestalten. Wir behandeln die Syntax, Selektoren, das Box-Model, Farben, Typografie und erste Schritte im Responsive Design. Am Ende nutzen Sie ein LLM, um CSS-Code für einen historischen Brief zu generieren.

1. Was ist CSS?

CSS steht für Cascading Style Sheets und wurde 1996 vom World Wide Web Consortium (W3C) als Standard eingeführt. Die Grundidee ist einfach, aber weitreichend: Die Struktur eines Dokuments (HTML) wird von seiner Darstellung (CSS) getrennt.

Vor CSS wurden Farben, Schriftgrößen und Layouts direkt in HTML-Tags geschrieben — z.B. mit dem inzwischen veralteten <font>-Tag. Das führte zu unübersichtlichem, schwer wartbarem Code. CSS löst dieses Problem, indem Gestaltungsregeln in eigene Dateien ausgelagert werden.

Schlüsselkonzept

Trennung von Inhalt und Darstellung: HTML definiert was auf einer Seite steht (Überschriften, Absätze, Listen, Links). CSS definiert wie es aussieht (Farben, Schriften, Abstände, Layout). Dasselbe HTML-Dokument kann mit unterschiedlichem CSS völlig anders gestaltet werden.

In den Digital Humanities ist dieses Prinzip besonders relevant. Wenn Sie z.B. einen historischen Briefwechsel digitalisieren, enthält das HTML (oder TEI-XML) den Text und die Struktur. CSS bestimmt dann, ob der Brief als moderner Fließtext oder im Stil eines historischen Dokuments dargestellt wird — ohne den Inhalt zu verändern.

Die Kaskade

Das Wort "Cascading" im Namen CSS bezieht sich auf das Prinzip der Kaskade: Wenn mehrere CSS-Regeln auf dasselbe Element zutreffen, bestimmt ein festes Regelwerk, welche Regel gewinnt. Die drei Faktoren sind:

Herkunft: Eigene Styles schlagen Browser-Defaults.
Spezifität: Spezifischere Selektoren haben Vorrang (ID > Klasse > Element).
Reihenfolge: Bei gleicher Spezifität gewinnt die zuletzt definierte Regel.

2. CSS einbinden

Es gibt drei Wege, CSS in ein HTML-Dokument einzubinden. Jede Methode hat ihre Berechtigung, aber in der Praxis verwenden wir fast immer ein externes Stylesheet.

Methode 1: Inline-Styles

Bei Inline-Styles wird CSS direkt im style-Attribut eines HTML-Elements geschrieben:

<p style="color: navy; font-size: 1.2rem; line-height: 1.8;">
  Dieser Absatz hat individuelle Styles.
</p>

<h1 style="text-align: center; border-bottom: 2px solid #333;">
  Zentrierte Überschrift mit Unterstrich
</h1>

Vorsicht

Inline-Styles sind die am wenigsten empfehlenswerte Methode. Sie vermischen Inhalt und Darstellung, sind nicht wiederverwendbar und schwer zu warten. Verwenden Sie Inline-Styles nur in Ausnahmefällen, z.B. für schnelle Tests oder E-Mail-Templates.

Methode 2: Style-Tag im Head

CSS-Regeln können in einem <style>-Tag im <head> des HTML-Dokuments stehen:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Meine Seite</title>
  <style>
    body {
      font-family: Georgia, serif;
      line-height: 1.6;
      color: #333;
      max-width: 700px;
      margin: 0 auto;
      padding: 2rem;
    }

    h1 {
      color: #1a5276;
      border-bottom: 2px solid #1a5276;
      padding-bottom: 0.5rem;
    }

    p {
      margin-bottom: 1rem;
    }
  </style>
</head>
<body>
  <h1>Willkommen</h1>
  <p>Ein gestylter Absatz.</p>
</body>
</html>

Diese Methode eignet sich für einzelne Seiten oder Prototypen, bei denen Sie schnell Styles ausprobieren möchten.

Methode 3: Externes Stylesheet (empfohlen)

Die beste Methode: CSS-Regeln stehen in einer eigenen .css-Datei, die im HTML-Head verlinkt wird:

index.html

<head>
  <meta charset="UTF-8">
  <title>Meine Seite</title>
  <link rel="stylesheet" href="style.css">
</head>

style.css

body {
  font-family: Georgia, serif;
  line-height: 1.6;
  color: #333;
}

h1 {
  color: #1a5276;
}

Best Practice

Verwenden Sie immer externe Stylesheets. Sie sind wiederverwendbar (mehrere HTML-Seiten können dasselbe Stylesheet verwenden), wartbar (Änderungen an einer Stelle wirken überall) und cachebar (der Browser muss die CSS-Datei nur einmal laden).

3. Selektoren

Ein CSS-Selektor bestimmt, auf welche HTML-Elemente eine Regel angewendet wird. Es gibt verschiedene Arten von Selektoren, die sich in ihrer Spezifität und ihrem Einsatzbereich unterscheiden.

Element-Selektoren

Der einfachste Selektor spricht HTML-Elemente direkt über ihren Tag-Namen an:

/* Alle Absätze */
p {
  line-height: 1.7;
  margin-bottom: 1rem;
}

/* Alle Überschriften erster Ordnung */
h1 {
  font-size: 2.5rem;
  color: #1a5276;
}

/* Alle Links */
a {
  color: #0000cc;
  text-decoration: underline;
}

/* Alle Bilder */
img {
  max-width: 100%;
  height: auto;
}

Element-Selektoren sind gut für allgemeine Grundregeln, betreffen aber alle Elemente dieses Typs auf der Seite.

Klassen-Selektoren

Klassen-Selektoren beginnen mit einem Punkt (.) und sprechen alle Elemente an, die das entsprechende class-Attribut haben. Klassen sind wiederverwendbar — mehrere Elemente können dieselbe Klasse haben, und ein Element kann mehrere Klassen haben.

/* HTML: <p class="hervorhebung">Wichtiger Text</p> */
.hervorhebung {
  background-color: #fef9e7;
  border-left: 4px solid #d4ac0d;
  padding: 1rem;
}

/* HTML: <div class="karte aktiv">...</div> */
.karte {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1.5rem;
}

.aktiv {
  border-color: #1a5276;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

Tipp

In der Praxis verwenden wir hauptsächlich Klassen-Selektoren. Sie bieten die beste Balance zwischen Spezifität und Flexibilität. Benennen Sie Klassen beschreibend: .brief-absatz ist besser als .ba oder .blau-text.

ID-Selektoren

ID-Selektoren beginnen mit einer Raute (#) und sprechen genau ein Element an — eine ID darf nur einmal pro Seite vorkommen:

/* HTML: <header id="seitenkopf">...</header> */
#seitenkopf {
  background: #1a5276;
  color: white;
  padding: 1rem 2rem;
}

/* HTML: <nav id="hauptnavigation">...</nav> */
#hauptnavigation {
  display: flex;
  gap: 1rem;
}

IDs haben eine hohe Spezifität, was sie schwer überschreibbar macht. Deshalb werden IDs in modernem CSS eher für JavaScript-Zugriffe oder als Sprungziele für Links verwendet, nicht für Styling.

Kombinierte Selektoren

Selektoren können auf verschiedene Weise kombiniert werden, um spezifische Elemente anzusprechen:

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

/* Direkter Kind-Selektor: nur direkte Kinder */
.navigation > li {
  display: inline-block;
}

/* Mehrere Selektoren (Gruppierung) */
h1, h2, h3 {
  font-family: Georgia, serif;
  color: #1a5276;
}

/* Element mit bestimmter Klasse */
p.wichtig {
  font-weight: bold;
  color: #c0392b;
}

/* Nachbar-Selektor: Element direkt nach einem anderen */
h2 + p {
  font-size: 1.1rem;
  color: #555;
}

Pseudo-Klassen

Pseudo-Klassen sprechen Elemente in einem bestimmten Zustand an, z.B. wenn die Maus über einem Element schwebt oder wenn es das erste Kind seines Elternelements ist:

/* Hover-Effekt: Maus über dem Element */
a:hover {
  color: #0000ff;
  text-decoration: none;
}

.karte:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s, box-shadow 0.2s;
}

/* Erstes und letztes Kind */
li:first-child {
  font-weight: bold;
}

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

/* Jedes zweite Element (z.B. Tabellenzeilen) */
tr:nth-child(even) {
  background-color: #f9f9f9;
}

/* Fokus (z.B. aktives Eingabefeld) */
input:focus {
  outline: 2px solid #1a5276;
  border-color: #1a5276;
}

Spezifität berechnen

Die Spezifität wird als Zahlentripel berechnet: (IDs, Klassen, Elemente). Beispiele:

p → (0, 0, 1)
.karte → (0, 1, 0)
#titel → (1, 0, 0)
.brief p.wichtig → (0, 2, 1)
#inhalt .brief p → (1, 1, 1)

Die Regel mit der höheren Spezifität gewinnt. Bei gleicher Spezifität gewinnt die Regel, die weiter unten in der CSS-Datei steht.

4. Das Box-Model

Das Box-Model ist eines der wichtigsten Konzepte in CSS. Es beschreibt, wie jedes HTML-Element als rechteckige Box dargestellt wird und wie der verfügbare Platz berechnet wird.

Die vier Schichten

Jede Box besteht von innen nach außen aus vier Schichten:

Content (Inhalt): Der eigentliche Text, das Bild oder andere Inhalte.
Padding (Innenabstand): Der Abstand zwischen dem Inhalt und dem Rahmen. Padding hat die Hintergrundfarbe des Elements.
Border (Rahmen): Eine sichtbare Linie um das Element (kann auch unsichtbar sein).
Margin (Außenabstand): Der Abstand zwischen dem Rahmen und den umgebenden Elementen. Margin ist immer transparent.

/*
  Visuelle Darstellung des Box-Models:

  +--------------------------------------------+
  |               MARGIN                       |
  |  +--------------------------------------+  |
  |  |          BORDER                      |  |
  |  |  +--------------------------------+  |  |
  |  |  |       PADDING                  |  |  |
  |  |  |  +---------------------------+ |  |  |
  |  |  |  |                           | |  |  |
  |  |  |  |        CONTENT            | |  |  |
  |  |  |  |                           | |  |  |
  |  |  |  +---------------------------+ |  |  |
  |  |  +--------------------------------+  |  |
  |  +--------------------------------------+  |
  +--------------------------------------------+
*/

Padding vs. Margin

Der Unterschied zwischen Padding und Margin verwirrt Anfänger oft. Hier eine klare Unterscheidung:

/* Padding: Innenabstand — Platz INNERHALB des Elements */
.karte {
  padding: 2rem;           /* Alle vier Seiten gleich */
  padding: 1rem 2rem;      /* Oben/Unten und Links/Rechts */
  padding: 1rem 2rem 1.5rem 2rem;  /* Oben Rechts Unten Links */
  padding-top: 1rem;       /* Einzelne Seite */
}

/* Margin: Außenabstand — Platz ZWISCHEN Elementen */
.karte {
  margin: 2rem;            /* Alle vier Seiten */
  margin: 2rem auto;       /* Oben/Unten 2rem, horizontal zentriert */
  margin-bottom: 1.5rem;   /* Nur unten */
}

Margin Collapsing

Wenn zwei vertikale Margins aufeinandertreffen (z.B. der margin-bottom eines Absatzes und der margin-top des nächsten), werden sie nicht addiert. Stattdessen gewinnt der größere Wert. Das nennt man Margin Collapsing. Beispiel: Ein Absatz mit margin-bottom: 20px gefolgt von einem Absatz mit margin-top: 30px ergibt einen Abstand von 30px (nicht 50px).

box-sizing: border-box

Standardmäßig bezieht sich die CSS-Eigenschaft width nur auf den Content. Padding und Border werden dazugerechnet, was die tatsächliche Breite vergrößert. Das ist oft unpraktisch.

/* Problem: Element wird breiter als erwartet */
.box {
  width: 300px;
  padding: 20px;
  border: 1px solid #ccc;
  /* Tatsächliche Breite: 300 + 40 + 2 = 342px! */
}

/* Lösung: box-sizing: border-box */
.box {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 1px solid #ccc;
  /* Tatsächliche Breite: 300px (Padding und Border sind darin enthalten) */
}

/* Best Practice: Global für alle Elemente setzen */
*, *::before, *::after {
  box-sizing: border-box;
}

display: block, inline, inline-block

Die display-Eigenschaft bestimmt, wie sich eine Box im Layout verhält:

/* Block-Elemente: Nehmen die volle Breite ein, beginnen auf neuer Zeile */
/* Standard bei: div, p, h1-h6, section, header, footer, ul, ol */
.block-element {
  display: block;
  width: 100%;      /* wirkt */
  height: 200px;    /* wirkt */
  margin: 1rem;     /* wirkt auf allen Seiten */
}

/* Inline-Elemente: Nur so breit wie ihr Inhalt, kein Zeilenumbruch */
/* Standard bei: span, a, strong, em, code */
.inline-element {
  display: inline;
  width: 200px;     /* wird IGNORIERT */
  height: 100px;    /* wird IGNORIERT */
  margin-top: 1rem; /* wird IGNORIERT (nur links/rechts wirkt) */
}

/* Inline-Block: Kombiniert beide Verhaltensweisen */
.inline-block-element {
  display: inline-block;
  width: 200px;     /* wirkt */
  height: 100px;    /* wirkt */
  margin: 1rem;     /* wirkt auf allen Seiten */
  /* Bleibt im Textfluss wie inline */
}

5. Farben und Typografie

Farbformate in CSS

CSS bietet mehrere Formate, um Farben zu definieren. Alle Formate sind gleichwertig — welches Sie verwenden, ist eine Frage der Vorliebe und des Kontexts.

/* 1. Benannte Farben — 147 vordefinierte Namen */
color: red;
color: navy;
color: cornflowerblue;
color: papayawhip;
background-color: aliceblue;

/* 2. Hexadezimal — #RRGGBB (am häufigsten verwendet) */
color: #ff0000;        /* Rot: FF rot, 00 grün, 00 blau */
color: #1a5276;        /* Dunkelblau */
color: #333333;        /* Dunkelgrau (Kurzform: #333) */
color: #ffffff;        /* Weiß (Kurzform: #fff) */

/* 3. RGB — rot, grün, blau (jeweils 0–255) */
color: rgb(255, 0, 0);          /* Rot */
color: rgb(26, 82, 118);        /* Dunkelblau */
color: rgba(0, 0, 0, 0.5);     /* Schwarz, 50% transparent */

/* 4. HSL — Farbton (0-360), Sättigung (%), Helligkeit (%) */
color: hsl(0, 100%, 50%);       /* Rot */
color: hsl(200, 64%, 28%);      /* Dunkelblau */
color: hsla(200, 64%, 28%, 0.8);/* Dunkelblau, 80% deckend */

Tipp: HSL ist intuitiv

Das HSL-Format ist besonders leicht zu verstehen: Der Farbton (Hue) dreht am Farbrad (0 = Rot, 120 = Grün, 240 = Blau). Die Sättigung bestimmt die Intensität (0% = Grau, 100% = volle Farbe). Die Helligkeit regelt hell/dunkel (0% = Schwarz, 50% = reine Farbe, 100% = Weiß). Um Farbvarianten zu erzeugen, ändern Sie einfach die Helligkeit.

Typografie

Die Gestaltung von Schrift ist ein zentraler Aspekt des Webdesigns. CSS bietet umfangreiche Möglichkeiten zur typografischen Gestaltung:

body {
  /* Schriftfamilie mit Fallback-Kette */
  font-family: Georgia, 'Times New Roman', serif;
  /*
    Der Browser versucht Georgia.
    Falls nicht vorhanden: Times New Roman.
    Falls auch nicht: irgendeine Serifenschrift.
  */

  /* Schriftgröße — bevorzugt in rem */
  font-size: 1rem;       /* 16px (Standard-Basisgröße) */
  font-size: 1.125rem;   /* 18px */

  /* Zeilenabstand — ohne Einheit = Faktor der Schriftgröße */
  line-height: 1.6;      /* 1.6 mal die Schriftgröße */

  /* Farbe des Textes */
  color: #222222;
}

h1, h2, h3 {
  /* Schriftstärke */
  font-weight: 700;     /* bold. Auch: 100-900, normal=400 */

  /* Buchstabenabstand */
  letter-spacing: -0.02em;  /* Leicht enger für Überschriften */
}

.untertitel {
  /* Kursiv */
  font-style: italic;

  /* Großbuchstaben */
  text-transform: uppercase;

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

  /* Unterstreichung entfernen/hinzufügen */
  text-decoration: none;
}

.absatz {
  /* Maximale Breite für Lesbarkeit */
  max-width: 65ch;  /* Ca. 65 Zeichen pro Zeile */

  /* Einrückung der ersten Zeile */
  text-indent: 1em;
}

Schriftfamilien und Web Fonts

Es gibt drei grundlegende Schriftfamilien-Kategorien:

Serif (mit Serifen): Georgia, Times New Roman, Palatino — klassisch, gut für Fließtext
Sans-Serif (ohne Serifen): Arial, Helvetica, Segoe UI — modern, klar
Monospace (feste Breite): Consolas, Courier New, JetBrains Mono — für Code

Neben den System-Schriften können Sie über Google Fonts Hunderte kostenlose Schriften einbinden:

<!-- Im HTML-Head: Google Font laden -->
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap"
      rel="stylesheet">

/* Im CSS verwenden: */
h1 {
  font-family: 'Playfair Display', Georgia, serif;
}

6. CSS-Variablen (Custom Properties)

CSS-Variablen (offiziell Custom Properties) ermöglichen es, Werte einmal zu definieren und überall wiederzuverwenden. Das macht CSS wartbarer und konsistenter — besonders bei größeren Projekten.

Variablen definieren

Variablen werden mit dem Präfix -- definiert, üblicherweise auf dem :root-Element (das gesamte Dokument):

:root {
  /* Farben */
  --farbe-primaer: #1a5276;
  --farbe-sekundaer: #2980b9;
  --farbe-akzent: #c0392b;
  --farbe-hintergrund: #fffff8;
  --farbe-text: #222222;
  --farbe-text-gedaempft: #666666;

  /* Schriften */
  --schrift-text: Georgia, 'Times New Roman', serif;
  --schrift-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --schrift-code: 'JetBrains Mono', Consolas, monospace;

  /* Abstände */
  --abstand-klein: 0.5rem;
  --abstand-mittel: 1rem;
  --abstand-gross: 2rem;

  /* Weitere Design-Tokens */
  --radius: 8px;
  --schatten: 0 2px 8px rgba(0, 0, 0, 0.1);
}

Variablen verwenden

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

.karte {
  background: var(--farbe-hintergrund);
  border: 1px solid var(--farbe-text-gedaempft);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: var(--abstand-gross);
  margin-bottom: var(--abstand-mittel);
}

/* Fallback-Wert für den Fall, dass die Variable nicht existiert */
.element {
  color: var(--farbe-unbekannt, #333333);
}

Warum CSS-Variablen?

Stellen Sie sich vor, Sie entwickeln eine Webseite für ein DH-Projekt und möchten die Primärfarbe ändern. Ohne Variablen müssten Sie #1a5276 an Dutzenden Stellen ersetzen. Mit Variablen ändern Sie nur den Wert von --farbe-primaer an einer einzigen Stelle — und die gesamte Seite passt sich an.

Variablen in verschiedenen Kontexten

/* Variablen können auch auf einzelnen Elementen gesetzt werden */
.dunkler-bereich {
  --farbe-text: #ffffff;
  --farbe-hintergrund: #1a1a2e;

  color: var(--farbe-text);
  background: var(--farbe-hintergrund);
}

/* Variablen in Media Queries überschreiben */
:root {
  --abstand-gross: 2rem;
}

@media (max-width: 768px) {
  :root {
    --abstand-gross: 1rem;  /* Weniger Abstand auf kleinen Bildschirmen */
  }
}

7. Responsive Design Grundlagen

Responsive Design bedeutet, dass sich eine Webseite automatisch an die Bildschirmgröße des Geräts anpasst — ob Smartphone, Tablet oder Desktop-Monitor. Statt separate Versionen einer Seite zu erstellen, verwenden wir ein flexibles Layout, das sich anpasst.

Der Viewport Meta-Tag

Ohne diesen Meta-Tag rendern mobile Browser die Seite in voller Desktop-Breite und zoomen dann heraus. Der Viewport-Tag weist den Browser an, die tatsächliche Gerätebreite zu verwenden:

<!-- MUSS in jedem HTML-Dokument im Head stehen: -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Media Queries

Media Queries sind CSS-Regeln, die nur unter bestimmten Bedingungen gelten — z.B. ab einer bestimmten Bildschirmbreite:

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

.brief-spalten {
  display: flex;
  gap: 2rem;
}

/* Tablet und kleiner (max-width: 768px) */
@media (max-width: 768px) {
  .brief {
    padding: 1.5rem;
    margin: 1rem;
  }

  .brief-spalten {
    flex-direction: column;
    gap: 1rem;
  }
}

/* Smartphone (max-width: 480px) */
@media (max-width: 480px) {
  .brief {
    padding: 1rem;
    font-size: 1rem;
  }
}

Relative Einheiten

Für responsives Design verwenden wir relative statt absolute Einheiten:

/* rem — relativ zur Root-Schriftgröße (meistens 16px) */
font-size: 1rem;       /* = 16px */
font-size: 1.5rem;     /* = 24px */
padding: 2rem;         /* = 32px */

/* em — relativ zur Schriftgröße des Elternelements */
margin-bottom: 1.5em;  /* 1.5 mal die aktuelle Schriftgröße */

/* Prozent — relativ zum Elternelement */
width: 100%;           /* Volle Breite des Elternelements */
max-width: 50%;        /* Maximal halbe Breite */

/* Viewport-Einheiten — relativ zum Browserfenster */
width: 100vw;          /* 100% der Fensterbreite */
height: 100vh;         /* 100% der Fensterhöhe */
font-size: 4vw;        /* 4% der Fensterbreite (skaliert!) */

/* ch — relativ zur Breite des Zeichens "0" */
max-width: 65ch;       /* Ideale Zeilenbreite für Fließtext */

Empfehlung

Verwenden Sie rem für Schriftgrößen und Abstände (vorhersagbar, skaliert gut), % und max-width für Layout-Breiten (flexibel), und ch für Textbreiten (lesbarkeitsorientiert). Vermeiden Sie feste Pixel-Werte für Layout-Elemente.

8. Agentic Coding mit CSS

Der Agentic-Coding-Ansatz bedeutet, dass Sie ein Large Language Model (LLM) wie Claude oder ChatGPT als Ihren Coding-Assistenten nutzen. Statt CSS-Eigenschaften auswendig zu lernen, beschreiben Sie das gewünschte Design und lassen das LLM den Code generieren. Aber — und das ist entscheidend — Sie müssen den generierten Code lesen und verstehen können.

Der Workflow

Beschreiben: Formulieren Sie einen präzisen Prompt, der das gewünschte Design beschreibt.
Generieren: Das LLM erzeugt CSS-Code basierend auf Ihrer Beschreibung.
Prüfen: Lesen Sie den Code — verstehen Sie jede Eigenschaft? Macht der Code das, was Sie wollten?
Iterieren: Verfeinern Sie den Prompt oder passen Sie den Code manuell an.

LLM-Hinweis

LLMs sind besonders gut darin, CSS zu generieren, weil CSS-Design sich gut in natürlicher Sprache beschreiben lässt. Die Qualität des Ergebnisses hängt stark von der Qualität Ihres Prompts ab.

Beispiel-Prompts für CSS

Prompt — Brief stylen

Erstelle CSS für ein div mit der Klasse "brief". Der Brief soll wie ein historisches Dokument aussehen: cremefarbener Hintergrund (#fdf6e3), Serifenschrift (Georgia), maximale Breite 700px, horizontal zentriert, mit 3rem Padding, einem feinen grauen Rahmen und einem dezenten Schatten. Die Zeilenhöhe soll 1.8 betragen.

Prompt — Farbpalette

Definiere CSS-Variablen für eine Farbpalette, die zu einem Digital-Humanities-Projekt über mittelalterliche Handschriften passt. Ich brauche eine Primärfarbe, eine Sekundärfarbe, eine Akzentfarbe, Hintergrund und Textfarbe. Alle Farben sollen warm und gedämpft wirken, inspiriert von Pergament und alten Tinten.

Prompt — Responsive Design

Ergänze Media Queries für die Klasse "brief", damit das Layout auf Smartphones (unter 480px) gut lesbar ist. Reduziere das Padding auf 1rem und die Schriftgröße auf 1rem. Entferne den Schatten auf kleinen Bildschirmen.

Code Literacy: Den generierten Code verstehen

Wenn das LLM folgenden CSS-Code generiert, sollten Sie jede Zeile erklären können:

.brief {
  max-width: 700px;          /* Maximale Breite: 700 Pixel */
  margin: 2rem auto;         /* Oben/Unten: 2rem Abstand, horizontal zentriert */
  padding: 3rem;             /* Innenabstand: 3rem auf allen Seiten */
  background-color: #fdf6e3; /* Cremefarbener Hintergrund */
  border: 1px solid #c4a35a; /* 1px breiter, durchgehender goldbrauner Rahmen */
  border-radius: 4px;        /* Leicht abgerundete Ecken */
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12); /* Dezenter Schatten nach unten */
  font-family: Georgia, 'Times New Roman', serif; /* Serifenschrift */
  font-size: 1.1rem;         /* Etwas größer als Standard */
  line-height: 1.8;          /* Großzügiger Zeilenabstand */
  color: #333;               /* Dunkelgraue Schriftfarbe */
}

Übung: Kommentare schreiben

Eine gute Übung für Code Literacy: Lassen Sie ein LLM CSS-Code generieren und schreiben Sie dann zu jeder Eigenschaft einen Kommentar, der erklärt, was sie tut. Wenn Sie eine Eigenschaft nicht erklären können, fragen Sie das LLM: "Was macht die CSS-Eigenschaft box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12)?"

Häufige Fehler beim LLM-generierten CSS

LLMs machen manchmal folgende Fehler, die Sie erkennen sollten:

Überflüssiger Code: Das LLM generiert mehr CSS als nötig. Prüfen Sie, ob jede Regel wirklich gebraucht wird.
Veraltete Eigenschaften: Manchmal werden alte CSS-Techniken verwendet. Fragen Sie nach modernen Alternativen.
Fehlende Responsivität: Wenn Sie nicht explizit nach Responsive Design fragen, generiert das LLM oft nur Desktop-Styles.
Inkonsistente Einheiten: Mischung von px, rem, em ohne System. Legen Sie im Prompt fest, welche Einheiten Sie verwenden möchten.

Ausprobieren

Öffnen Sie ein LLM Ihrer Wahl und formulieren Sie einen Prompt, um CSS für einen historischen Brief zu generieren. Versuchen Sie dann, jede Zeile des generierten Codes zu erklären. Verfeinern Sie den Prompt, bis Sie mit dem Ergebnis zufrieden sind.