Schriften und Klassen · Code mit Martin

Wähle eine passende Schrift für deine Website und lerne Klassen – den nützlichsten Trick in ganz CSS.

Zeig mir das: eine schönere Schrift

Die Standard-Schrift des Browsers ist langweilig. Tauschen wir sie mit einer Regel für die ganze Seite:

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

font-family ist eine Wunschliste: „Nimm Verdana. Nicht da? Dann Arial. Auch nicht? Dann irgendeine serifenlose Schrift (sans-serif).”

Schriften, die fast jeder Computer hat: Verdana, Georgia (mit Füßchen, gut für längere Texte), Trebuchet MS, Courier New (sieht aus wie eine Schreibmaschine). Probier ein paar aus – die Schrift zu ändern wirkt Wunder auf einer Website.

Zeig mir das: Klassen

Bisher kannst du alle Absätze auf einmal stylen. Aber was, wenn ein Absatz anders aussehen soll – wie eine wichtige Mitteilung? Dafür gibt es Klassen:

In HTML gib einem Tag einen Klassennamen:

<p class="notice">No school tomorrow!</p>

Und in CSS zielst du mit einem Punkt darauf:

.notice {
  background-color: #fef3c7;
  border: 2px solid #f59e0b;
  padding: 10px;
  border-radius: 8px;
}

background-color – die Hintergrundfarbe nur dieses Elements
border – ein Rahmen: Dicke, Stil, Farbe
padding – Abstand zwischen Text und Rahmen (damit der Text nicht am Rand klebt)
border-radius – abgerundete Ecken

Eine Klasse kannst du auf so viele Elemente legen, wie du willst – alle sehen gleich aus. Wie eine Schuluniform, aber für Tags.

Jetzt du 💪

Setze mit font-family auf body eine Schrift für deine ganze Website.
Erfinde mindestens eine Klasse, die zu deinem Projekt passt, und nutze sie an zwei Stellen.

🏫 Schulwebsite – Lösung (Klasse „news")

<p class="news">📢 No school on Friday – teacher training day!</p>
<p class="news">📢 Paper drive starts Monday.</p>

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

.news {
  background-color: #fef3c7;
  border: 2px solid #f59e0b;
  padding: 10px;
  border-radius: 8px;
}

🙋 Persönliche Website – Lösung (Klasse „favorite")

<p class="favorite">⭐ Favorite game: Minecraft</p>
<p class="favorite">⭐ Favorite food: pancakes</p>

body {
  font-family: "Trebuchet MS", Verdana, sans-serif;
}

.favorite {
  background-color: #ffedd5;
  border: 2px solid #ea580c;
  padding: 10px;
  border-radius: 8px;
}

🌍 Reisetagebuch – Lösung (Klasse „tip")

<p class="tip">🎒 Trip tip: head up the mountain early, before it gets hot.</p>
<p class="tip">🎒 Tip: bring water shoes to the beach!</p>

body {
  font-family: Georgia, "Times New Roman", serif;
}

.tip {
  background-color: #dcfce7;
  border: 2px solid #16a34a;
  padding: 10px;
  border-radius: 8px;
}

⚽ Vereinswebsite – Lösung (Klasse „win")

<li class="win">Eagles – Hawks 3 : 1</li>
<li>Falcons – Eagles 2 : 2</li>
<li class="win">Eagles – Wildcats 4 : 0</li>

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

.win {
  background-color: #dcfce7;
  font-weight: bold;
}

Siege werden sofort grün hervorgehoben – wie in einer echten Tabelle!

✅

Kontrolliere dich selbst: Deine Website hat eine neue Schrift, und mindestens ein Element mit eigener Klasse, das anders aussieht als der Rest.

Das nimmst du aus dieser Lektion mit

font-family auf body ändert die Schrift für die ganze Website.
Eine Klasse ist ein Namensschild: in HTML class="name", in CSS .name { ... }.
padding, border und border-radius machen aus einem einfachen Absatz ein schönes farbiges Badge.