Im dritten Teil haben wir das Layout mit echten Inhalten gefüllt: Cards, Bilder, Links und kleine Komponenten. Jetzt kommen zwei Dinge dazu, die eine Website erst wirklich benutzbar und angenehm lesbar machen: eine Navigationsleiste und überarbeitete Typografie.
Das HTML und CSS aus den vorherigen Teilen bleibt vollständig erhalten. Wir fügen nur neue Blöcke hinzu.
Die erweiterte Website – Beispiel 4Die Navigation im HTML
Die Navigation kommt direkt nach dem <header> und vor dem eigentlichen Inhaltsbereich. Dafür gibt es das semantische HTML-Element <nav>. Es signalisiert Browsern und Screenreadern, dass dieser Bereich zur Seitennavigation gehört.
Innerhalb des <nav>-Elements steht eine ungeordnete Liste <ul>. Die einzelnen Navigationspunkte sind <li>-Elemente, jedes davon enthält einen Link <a>:
<nav class="main-nav">
<ul class="nav-list">
<li><a href="#">Startseite</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
Warum eine Liste? Eine Navigation ist strukturell eine Aufzählung von Seiten. Deshalb ist <ul> semantisch korrekt – auch wenn sie am Ende horizontal und ohne Aufzählungspunkte dargestellt wird. Die Aufzählungspunkte entfernt CSS später, nicht HTML.
Die Navigation mit CSS gestalten
Ohne CSS sähe die Navigation aus wie eine ganz normale Liste: senkrecht, mit Punkten davor, ohne besondere Optik. Mit ein paar CSS-Regeln wird daraus eine horizontale Menüleiste:
.main-nav {
margin-top: 2rem;
margin-bottom: 2rem;
background-color: white;
border-radius: 0.8rem;
box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.08);
}
.nav-list {
display: flex;
gap: 1rem;
margin: 0;
padding: 1.2rem;
list-style: none;
flex-wrap: wrap;
}
.nav-list a {
display: inline-block;
padding: 1rem 1.4rem;
background-color: aliceblue;
border-radius: 0.6rem;
color: darkslategray;
text-decoration: none;
font-weight: bold;
letter-spacing: 0.03rem;
transition: background-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
list-style: none entfernt die Aufzählungspunkte. display: flex ordnet die Listenelemente nebeneinander an. gap: 1rem sorgt für den Abstand zwischen den einzelnen Punkten. flex-wrap: wrap erlaubt dem Menü, auf kleineren Bildschirmen in mehrere Zeilen umzubrechen – eine einfache Vorbereitung für spätere Responsive-Anpassungen.
Die Links selbst bekommen mit display: inline-block die Möglichkeit, padding zu nutzen – das funktioniert bei Inline-Elementen standardmäßig nicht zuverlässig. Das padding erzeugt eine großzügige Klickfläche um den Linktext.
Hover-Effekt bei der Navigation
Beim Hovern über einen Navigationspunkt soll sich die Hintergrundfarbe ändern und der Punkt sich leicht anheben. Das sind zwei separate Effekte, die gemeinsam wirken:
.nav-list a:hover {
background-color: lightcyan;
color: darkblue;
transform: translateY(-0.2rem);
}
background-color: lightcyan wechselt die Hintergrundfarbe des Links – von aliceblue zu einem helleren, leicht blau-türkisen Ton. color: royalblue verändert gleichzeitig die Schriftfarbe. transform: translateY(-0.2rem) verschiebt den Link um 0,2rem nach oben.
Damit der Wechsel nicht abrupt aussieht, ist in der normalen Regel bereits transition definiert. Die transition gibt an, welche Eigenschaften animiert werden sollen und wie lange die Animation dauert:
transition: background-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
Drei Eigenschaften werden animiert: background-color, transform und color. Jede davon bekommt dieselbe Dauer von 0.2s und denselben Verlauf ease. ease bedeutet: Der Übergang startet langsam, wird kurz schneller und endet wieder langsamer – das fühlt sich natürlicher an als ein starrer linearer Ablauf.
Die transition-Regel steht bewusst im normalen Zustand, nicht im :hover-Zustand. Wäre sie nur beim Hover definiert, würde der Übergang beim Hinfahren mit der Maus animiert, aber beim Wegfahren abrupt abbrechen – weil die Transition-Regel dann nicht mehr gilt.
Typografie: Schrift, die wirkt
Typografie ist mehr als die Wahl einer Schriftart. Sie umfasst Schriftgröße, Zeilenabstand, Zeichenabstand und die Hierarchie zwischen Überschriften und Fließtext. Schon kleine Anpassungen können den Unterschied zwischen einer rohen und einer professionell wirkenden Seite ausmachen.
In unserem Beispiel setzen wir für die Überschriften eine Serifenschrift ein und erhöhen den Zeilenabstand im Fließtext:
h1,
h2,
h3 {
font-family: Georgia, "Times New Roman", serif;
line-height: 1.2;
letter-spacing: 0.02rem;
}
h1 {
margin-top: 0;
margin-bottom: 1rem;
font-size: 3.6rem;
}
h2 {
margin-top: 0;
margin-bottom: 1.2rem;
font-size: 2.6rem;
}
h3 {
margin-top: 0;
margin-bottom: 1rem;
font-size: 1.9rem;
}
font-family: Georgia, "Times New Roman", serif ist eine Schriftfamilien-Angabe mit Fallbacks. Der Browser versucht zunächst Georgia zu laden. Ist Georgia nicht verfügbar, weicht er auf Times New Roman aus. Schlägt auch das fehl, nimmt er die generische Kategorie serif – also irgendeine Serifenschrift, die das System kennt.
Georgia ist eine Serifenschrift, die speziell für Bildschirme optimiert wurde. Serifenschriften wirken bei Überschriften edler und verleihen einer Seite mehr Charakter – vor allem im Zusammenspiel mit einer serifenlosen Schrift im Fließtext, wie hier Arial.
Zwei Schriftarten, ein Zusammenspiel
Unser Fließtext benutzt Arial, sans-serif – das ist im body definiert und gilt global für alle Texte auf der Seite. Die Überschriften überschreiben diese Vorgabe gezielt mit einer anderen Schriftart:
/* Fließtext – global */
body {
font-family: Arial, sans-serif;
line-height: 1.7;
}
/* Überschriften – gezielt überschrieben */
h1, h2, h3 {
font-family: Georgia, "Times New Roman", serif;
}Das nennt sich Schrift-Kontrast. Wenn Überschriften und Fließtext aus verschiedenen Schriftkategorien stammen – hier Serif und Sans-Serif – entsteht ein klares visuelles Gefälle zwischen beiden. Die Überschriften fallen sofort als Überschriften auf, ohne dass man sie fett oder groß drucken müsste. Das ist ein klassisches Prinzip des Buchsatzes, das sich direkt auf Websites übertragen lässt.
Zeilenabstand und Lesbarkeit
Der Zeilenabstand – in CSS line-height – hat einen starken Einfluss darauf, wie angenehm ein Text zu lesen ist. Ein zu geringer Zeilenabstand lässt die Zeilen ineinander laufen. Zu viel Abstand zerreißt den Lesefluss.
Für Fließtext gilt line-height: 1.7 im body. Das bedeutet: Der Zeilenabstand beträgt das 1,7-fache der aktuellen Schriftgröße. Bei einer Schriftgröße von 1.6rem (also 16px) wäre das ein Zeilenabstand von rund 27px. Das ist bewusst großzügig – besonders für längere Texte wirkt das luftiger und angenehmer.
Für Überschriften gilt dagegen line-height: 1.2. Überschriften sind kurz und groß – ein hoher Zeilenabstand würde mehrzeilige Überschriften auseinandertreiben. Mit 1.2 bleiben die Zeilen kompakt zusammen.
Zeichenabstand mit letter-spacing
letter-spacing: 0.02rem bei den Überschriften fügt einen minimalen Abstand zwischen den Buchstaben ein. Das ist kaum sichtbar – aber spürbar: Der Text wirkt etwas luftiger und leichter, ohne auseinanderzufallen. Bei größeren Schriftgraden wie Überschriften kann ein kleines letter-spacing die optische Ausgewogenheit verbessern.
Im Fließtext sollte man letter-spacing kaum oder gar nicht einsetzen – dort funktioniert der Zeichenabstand durch die Schriftart selbst am besten.
Das neue CSS im Überblick
Gegenüber Teil 3 kommen folgende Blöcke dazu – der Rest bleibt unverändert:
/* Neu in Teil 4: Navigation */
.main-nav {
margin-top: 2rem;
margin-bottom: 2rem;
background-color: white;
border-radius: 0.8rem;
box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.08);
}
.nav-list {
display: flex;
gap: 1rem;
margin: 0;
padding: 1.2rem;
list-style: none;
flex-wrap: wrap;
}
.nav-list a {
display: inline-block;
padding: 1rem 1.4rem;
background-color: aliceblue;
border-radius: 0.6rem;
color: #222;
text-decoration: none;
font-weight: bold;
letter-spacing: 0.03rem;
transition: background-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.nav-list a:hover {
background-color: lightcyan;
color: royalblue;
transform: translateY(-0.2rem);
}
/* Neu in Teil 4: Typografie */
h1,
h2,
h3 {
font-family: Georgia, "Times New Roman", serif;
line-height: 1.2;
letter-spacing: 0.02rem;
}
h1 {
margin-top: 0;
margin-bottom: 1rem;
font-size: 3.6rem;
}
h2 {
margin-top: 0;
margin-bottom: 1.2rem;
font-size: 2.6rem;
}
h3 {
margin-top: 0;
margin-bottom: 1rem;
font-size: 1.9rem;
}Was bisher entstanden ist
Nach vier Teilen hat unsere Beispielseite eine vollständige Grundstruktur: ein festes Layout mit Hauptbereich und Sidebar, echte Inhaltskomponenten wie Cards mit Hover-Effekt, eine Navigationsleiste mit Animation und eine durchdachte Typografie. Das CSS ist schrittweise gewachsen – ohne dass frühere Regeln überschrieben oder gebrochen wurden.
Im nächsten Teil machen wir die Website responsive, damit sie sich an kleinere Bildschirme anpasst.