Zusammenfassung

• CSS einbinden: immer extern (<link rel="stylesheet">)
• Selektoren: Element, Klasse, ID, Nachfahren ( ) & Kind (>), Link-Pseudo-Klassen (:link/:visited/:hover/:active), :focus, Gruppierung mit Komma
• 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% + height: auto, object-fit für feste Bildgrößen, background-image für Hintergrundbilder
• Listen (list-style) und overflow sinnvoll stylen
• div/span als letzter Ausweg, weitere Einheiten (%, vw/vh, ch)
• Nesting für übersichtlichere, HTML-nahe Struktur

Wie geht’s weiter?

Mehrspaltiges Layout mit Flexbox/Grid sowie native Elemente wie <details>, <dialog> und popover kommen im Layout-Kapitel. Media Queries, Container Queries, Dark Mode und weitere Nutzer*innen-Präferenzen (prefers-reduced-motion & Co.) kommen im eigenen Responsive-Kapitel.

Vertiefung

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

• Webseite des Newsletters CSS Weekly