Aufgabe:

  1. Ändere die Schriftart der Seite.

  2. Vergrößere die Überschrift im Header.

  3. Passe .text an.

  4. Füge eine neue Überschrift oder Textzeile in einer Box hinzu.

Überschrift mit Serifen und zentriert

Erklärung:

CSS steuert, wie Texte dargestellt werden:

  • Schriftart (font-family)

  • Schriftgröße (font-size)

  • Zeilenhöhe (line-height)

  • Textfarbe (color)

Die Größe und Schriftart beeinflussen Lesbarkeit und Stil. Überschriften sollten hierarchisch sinnvoll eingesetzt werden.

Technische Umsetzung:

1. Schriftart der gesamten Seite ändern

Öffne style.css und suche den body-Selektor:

 body { 
  font-family: Arial, sans-serif; 
}

➡ Du kannst jede Schriftart wählen. Allerdings wird diese natürlich nur angezeigt, wenn sie auf dem Zielrechner auch vorhanden ist. Wenn der Name Leerzeichen enthält, in Anführungszeichen setzen:

body {
  font-family: "Courier New", monospace;
}

2. Überschrift im Header anpassen

Die Größe der Hauptüberschrift <h1> ändern:

 h1 { 
  font-size: 36px; 
  text-align: center /* positioniert den Text zentriert */
}

Manchmal werden Schriften nicht in Pixel, sondern in em (relativ zur Größe des übergeordneten Elements) oder rem (relativ zur Schriftgröße des Root-Elements angegeben)

Beispiel:

h1 { font-size: 36px; }   /* Feste Pixelgröße */
h2 { font-size: 2em; }    /* Doppelt so groß wie die Elternelement-Schrift */
p { font-size: 1rem; }    /* Gleiche Größe wie die Body-Schrift */

3. Absätze über die Klasse .text anpassen

.text {
  font-size: 16px;
  line-height: 1.5;
  color: #333333;
}

  • font-size = Schriftgröße

  • line-height = Zeilenhöhe (Abstand zwischen Textzeilen)

  • color = Textfarbe

4. Neue Überschrift oder Textabsatz hinzufügen

<section class="box"> 
  <h2>Meine eigene Überschrift</h2> 
  <p class="text">Hier steht ein spannender Text.</p> 
</section>

➡ <h2> = etwas kleinere Überschrift als <h1>
➡ <p> = Absatz
➡ class="text" = CSS-Regeln der Klasse .text anwenden

Zuletzt geändert: Dienstag, 16. Dezember 2025, 09:13