CSS3 Grundlagen und modernes Webdesign

Dieses Seminar fokussiert sich auf die visuelle Gestaltung von Webseiten mit Cascading Style Sheets (CSS). Teilnehmer erlernen das Box-Modell, Typografie, moderne Layout-Konzepte wie Flexbox und CSS Grid sowie die Prinzipien des Responsive Webdesigns für mobile und Desktop-Ansichten.

Zielgruppe / Voraussetzung

Zielgruppe: Webentwickler, Frontend-Designer und UI/UX-Interessierte.
Voraussetzung: Solide HTML-Grundkenntnisse.

Detaillierte Inhalte

CSS-Grundlagen und Selektoren

Einbindung von CSS (Inline, Internal, External)
Syntax und Aufbau von CSS-Regeln
Selektoren: Typ, Klasse, ID, Universal- und Attributselektoren
Kombinatoren (Nachfahren, Kinder, Geschwister) und Pseudoklassen (:hover, :nth-child)
Die Kaskade, Spezifität und Vererbung (Das "C" in CSS)

Box-Modell und Typografie

Das CSS Box-Modell im Detail (Content, Padding, Border, Margin)
Steuerung des Box-Verhaltens (box-sizing: border-box)
Schriftarten einbinden (Web Fonts, Google Fonts)
Textformatierung, Zeilenabstand, Ausrichtung und Schatten (text-shadow, box-shadow)

Positionierung und Layout

Element-Flow: display (block, inline, inline-block, none)
Positionierung: static, relative, absolute, fixed, sticky
Umgang mit Überläufen (overflow) und Z-Index

Moderne Layouts: Flexbox

Grundlagen des Flexible Box Module
Flex-Container und Flex-Items
Ausrichtung und Verteilung von Platz (justify-content, align-items, flex-wrap)

Moderne Layouts: CSS Grid

Einführung in zweidimensionale Layouts
Rasteraufbau: grid-template-columns, grid-template-rows
Platzierung von Elementen auf dem Grid
Kombination von Grid und Flexbox

Responsive Design und Media Queries

Mobile-First vs. Desktop-First Ansatz
Breakpoints definieren mit @media-Regeln
Flexible Bilder (max-width: 100%) und fließende Layouts
CSS-Variablen (Custom Properties) für Theme-Steuerung (z.B. Dark Mode)

Häufige Fragen (FAQ)

Wann verwendet man Flexbox und wann CSS Grid?

Flexbox ist ideal für eindimensionale Layouts (Zeile ODER Spalte, wie Navigationen oder Button-Leisten). CSS Grid ist für zweidimensionale Layouts (gleichzeitige Zeilen- und Spaltenstruktur ganzer Seitenbereiche) konzipiert. Beide Systeme ergänzen sich in modernen Web-Layouts perfekt.

Was bedeutet Mobile-First im modernen Webdesign?

Beim Mobile-First-Ansatz wird das Basis-CSS für kleine Smartphone-Displays optimiert. Über progressive @media (min-width: ...) Regeln werden Layouts für Tablets und Desktops gezielt erweitert, was Ladezeiten minimiert und die mobile Usability maximiert.

Wie erleichtern CSS Custom Properties (Variablen) das Theming?

Mit CSS-Variablen (ar(--color-primary)) lassen sich Farbwelten, Abstände und Dark-Mode-Themes zentral steuern. Eine Änderung des Wertes an der Wurzel (:root) aktualisiert das gesamte Erscheinungsbild verzögerungsfrei im Browser.

Wer unterrichtet modernes CSS3 und Webdesign?

Dozent ist Frank Glück. Seit über drei Jahrzehnten unterrichtet er Webtechnologien und programmiert seit fast 40 Jahren. Er schult modernes, wartungsarmes CSS ohne überladene Dritt-Frameworks.