CSS3 Grundlagen und modernes Webdesign

Einleitung

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)