Übungen — Einheit 02: CSS-Grundlagen

Brief-Design

Gegeben ist das HTML eines historischen Briefes von Hugo Schuchardt. Ihre Aufgabe: Schreiben Sie CSS, um den Brief ansprechend zu gestalten. Verwenden Sie eine Serifenschrift, einen cremefarbenen Hintergrund, Abstände und einen feinen Rahmen.

Anforderungen:

Serifenschrift (z.B. Georgia) für den gesamten Brief
Maximale Breite von 700px, horizontal zentriert
Cremefarbener Hintergrund (z.B. #fdf6e3 oder #fffff8)
Innenabstand (Padding) von mindestens 2rem
Ein feiner Rahmen und ein dezenter Schatten
Absender rechtsbündig und kursiv
Datum rechtsbündig
Anrede fett
Großzügiger Zeilenabstand (mind. 1.6)

/* Übung 1: Gestalten Sie den Brief mit CSS */

.brief {
  /* Breite und Zentrierung */
  max-width: 700px;
  margin: 2rem auto;

  /* Hintergrund und Rahmen */

  /* Innenabstand */

  /* Schrift und Zeilenabstand */

}

.absender {
  /* Rechtsbündig und kursiv */

}

.datum {
  /* Rechtsbündig, Abstand nach unten */

}

.anrede {
  /* Fett */

}

.brief-text {
  /* Absatz-Styles */

}

.gruss {
  /* Abstand nach oben, kursiv */

}

Vorschau

Agentic-Coding-Tipp

Versuchen Sie es zuerst selbst! Wenn Sie nicht weiterkommen, beschreiben Sie einem LLM, wie der Brief aussehen soll. Vergleichen Sie den generierten Code mit Ihrer eigenen Lösung. Können Sie jede Zeile des LLM-Codes erklären?

Box-Model-Explorer

Experimentieren Sie mit dem Box-Model! Ändern Sie die Werte für padding, margin, border und width der Box und beobachten Sie, wie sich die Darstellung verändert.

Aufgaben:

Setzen Sie das Padding auf 30px — was passiert mit der Box?
Ändern Sie die Border-Breite auf 5px und die Farbe auf red
Setzen Sie margin: 40px auto; — was bewirkt auto?
Fügen Sie box-sizing: border-box; hinzu — wie ändert sich die Gesamtbreite?
Experimentieren Sie mit unterschiedlichen Padding-Werten pro Seite

/* Übung 2: Experimentieren Sie mit dem Box-Model */

body {
  font-family: -apple-system, sans-serif;
  background: #f0f0f0;
  padding: 1rem;
}

.box-demo {
  max-width: 600px;
  margin: 0 auto;
}

.box {
  /* Ändern Sie diese Werte und beobachten Sie die Vorschau! */

  /* Content-Breite */
  width: 300px;

  /* Innenabstand (Padding) */
  padding: 15px;

  /* Rahmen (Border) */
  border: 2px solid #1a5276;

  /* Außenabstand (Margin) */
  margin: 20px;

  /* Hintergrund */
  background-color: white;

  /* Probieren Sie box-sizing aus: */
  /* box-sizing: border-box; */
}

.inhalt {
  background-color: #eaf2f8;
  padding: 10px;
  font-size: 0.9rem;
  line-height: 1.5;
}

Vorschau

Tipp

Öffnen Sie die Vorschau auch in den Browser-DevTools (Rechtsklick auf die Box → "Element untersuchen"). Dort sehen Sie das Box-Model als interaktive Grafik mit allen berechneten Werten.

DH-Farbpalette

Erstellen Sie eine Farbpalette für ein Digital-Humanities-Projekt. Definieren Sie CSS-Variablen für die Farben und wenden Sie sie auf die HTML-Elemente an. Experimentieren Sie mit verschiedenen Farbkombinationen!

Aufgaben:

Definieren Sie mindestens 5 CSS-Variablen auf :root (Primärfarbe, Sekundärfarbe, Akzent, Hintergrund, Text)
Wenden Sie die Variablen auf die vorhandenen Elemente an
Passen Sie die Farben so an, dass sie zu einem Projekt über historische Briefe passen
Experimentieren Sie: Ändern Sie nur die Variablen-Werte und beobachten Sie, wie sich die gesamte Seite anpasst

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<style>
/* Definieren Sie Ihre CSS-Variablen hier: */
:root {
  --farbe-primaer: #1a5276;
  --farbe-sekundaer: #2980b9;
  --farbe-akzent: #c0392b;
  --farbe-hintergrund: #fffff8;
  --farbe-text: #222222;
  /* Fügen Sie weitere Variablen hinzu! */
}

body {
  font-family: Georgia, serif;
  background-color: var(--farbe-hintergrund);
  color: var(--farbe-text);
  padding: 2rem;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

h1 {
  color: var(--farbe-primaer);
  border-bottom: 2px solid var(--farbe-primaer);
  padding-bottom: 0.5rem;
}

h2 {
  color: var(--farbe-sekundaer);
}

.karte {
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1rem;
  /* Verwenden Sie hier CSS-Variablen für border-left */
}

.karte-titel {
  font-weight: bold;
  margin-bottom: 0.5rem;
  /* Farbe? */
}

.akzent {
  /* Verwenden Sie die Akzentfarbe */
  color: var(--farbe-akzent);
  font-weight: bold;
}

.farbpalette {
  display: flex;
  gap: 1rem;
  margin: 1.5rem 0;
  flex-wrap: wrap;
}

.farbfeld {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0.3rem;
  font-size: 0.7rem;
  color: white;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
</style>
</head>
<body>

<h1>DH-Projekt: Schuchardt-Korrespondenz</h1>
<p>
  Eine digitale Edition der Briefe von
  <span class="akzent">Hugo Schuchardt</span>
  aus dem 19. Jahrhundert.
</p>

<h2>Farbpalette</h2>
<div class="farbpalette">
  <div class="farbfeld" style="background: var(--farbe-primaer);">Primär</div>
  <div class="farbfeld" style="background: var(--farbe-sekundaer);">Sekundär</div>
  <div class="farbfeld" style="background: var(--farbe-akzent);">Akzent</div>
  <div class="farbfeld" style="background: var(--farbe-text);">Text</div>
</div>

<h2>Beispiel-Karten</h2>
<div class="karte">
  <div class="karte-titel">Brief Nr. 1</div>
  <p>An Gustav Gröber, 12. Jänner 1882. Diskussion über romanische Sprachwissenschaft.</p>
</div>

<div class="karte">
  <div class="karte-titel">Brief Nr. 2</div>
  <p>An Gaston Paris, 3. März 1882. Über Sprachmischung und Kreolsprachen.</p>
</div>

<div class="karte">
  <div class="karte-titel">Brief Nr. 3</div>
  <p>An Johannes Schmidt, 15. Mai 1882. Zur Stammbaumtheorie vs. Wellentheorie.</p>
</div>

</body>
</html>

Vorschau

Agentic-Coding-Tipp

Fragen Sie ein LLM: "Schlage mir eine CSS-Farbpalette vor, die zu einem Digital-Humanities-Projekt über mittelalterliche Handschriften passt. Gib mir die Farben als CSS-Variablen mit HSL-Werten." Vergleichen Sie den Vorschlag mit Ihrer eigenen Palette.

Responsive Brief

Der Brief aus Übung 1 sieht auf dem Desktop gut aus — aber wie sieht er auf einem Smartphone aus? Ihre Aufgabe: Fügen Sie Media Queries hinzu, damit der Brief auch auf kleinen Bildschirmen gut lesbar ist.

Anforderungen:

Bei Bildschirmen unter 768px: Padding auf 1.5rem reduzieren
Bei Bildschirmen unter 480px: Padding auf 1rem, Schriftgröße auf 0.95rem
Den Schatten auf kleinen Bildschirmen entfernen (spart Platz)
Die maximale Breite auf kleinen Bildschirmen auf 100% setzen
Verkleinern Sie die Vorschau, um das Ergebnis zu testen

/* Übung 4: Machen Sie den Brief responsive */

/* === Standard-Styles (Desktop) === */
.brief {
  max-width: 700px;
  margin: 2rem auto;
  padding: 3rem;
  background-color: #fdf6e3;
  border: 1px solid #c4a35a;
  border-radius: 4px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.1rem;
  line-height: 1.8;
  color: #333;
}

.absender {
  text-align: right;
  font-style: italic;
  color: #666;
  margin-bottom: 0.5rem;
}

.datum {
  text-align: right;
  color: #888;
  margin-bottom: 2rem;
  font-size: 0.95rem;
}

.anrede {
  font-weight: bold;
  margin-bottom: 1rem;
}

.brief-text {
  margin-bottom: 1rem;
  text-indent: 1em;
}

.gruss {
  margin-top: 2rem;
  font-style: italic;
}

/* === Media Queries === */
/* Fügen Sie hier Ihre Media Queries hinzu: */

/* Tablet (max-width: 768px) */


/* Smartphone (max-width: 480px) */

Vorschau

Tipp

Um das responsive Verhalten zu testen, können Sie die Vorschau-iframe kleiner ziehen oder den Browser-Responsive-Modus verwenden (DevTools → Geräte-Symbol oder Strg+Shift+M in Chrome/Firefox). Probieren Sie verschiedene Bildschirmgrößen aus!

Übungen: CSS-Grundlagen

Brief-Design

Box-Model-Explorer

DH-Farbpalette

Responsive Brief