logo

CSS - Vom Entwurf zum Layout 3

Inhalt

HTML

Der Seiteninhalt besteht aus Header, Navigation, Inhaltsbereich (main) und dem Footer.

Was vielen nicht bewusst ist: HTML an sich ist responsiv - Elemente wie Überschriften und Absätze nehmen die gesamte Breite des Viewports ein und brechen überstehenden Text um, so dass er nach unten in einer neuen Zeile dargestellt wird. Erst eine starre Mehrspaltigkeit verhindert die passende Darstellung auf mobilen Geräten.

Formatierung mit CSS

In einem ersten Schritt hatten wir Farben und Abstände definiert.

Wenn ein Nutzer im Betriebssystem oder Browser einstellt, dass er einen Dark Mode bevorzugt, erhält die Seite einen dunklen Hintergrund und entsprechend helle Textfarben.

aktuelle Infos und Termine (h2)