Zum Inhalt springen
Online Lehrbuch

Zusammenfassung

  • CSS einbinden: immer extern (<link rel="stylesheet">)
  • Selektoren: Element, Klasse, ID, Nachfahren ( ) & Kind (>), Link-Pseudo-Klassen (:link/:visited/:hover/:active), :focus, Attribut-Selektoren ([href^="..."]), :nth-child()/:first-child/:last-child, :has(), Pseudo-Elemente (::first-letter, ::first-line, ::selection)
  • Farben: Keyword, Hex, RGB(A), HSL - je nach Bedarf
  • Typografie: rem für Schriftgrößen, guter Font-Stack, line-height 1.4–1.6
  • display: block vs. inline vs. inline-block - bestimmt, wie Elemente überhaupt im Layout sitzen
  • Box-Modell: content → padding → border → margin, plus box-sizing: border-box
  • Bilder (max-width: 100%, object-fit), Listen (list-style) und overflow sinnvoll stylen
  • div/span als letzter Ausweg, weitere Einheiten (%, vw/vh, ch)
  • Positionierung: relative, absolute, fixed, sticky plus z-index
  • CSS-Variablen (--name / var()) für Wartbarkeit & Design-Systeme
  • Nesting für übersichtlichere, HTML-nahe Struktur
  • Dark Mode ganz ohne JavaScript, mit prefers-color-scheme oder light-dark()
  • Responsive Design: Media Queries für den Viewport, Container Queries für einzelne Komponenten

Vertiefung

Abschnitt betitelt „Vertiefung“

Das war ein erster, gründlicher Schritt in CSS. Arbeitet ihr im Webdesign, wird CSS euch immer begleiten. Eine gute Quelle für aktuelle Themen ist der Newsletter CSS Weekly: