Cascading Style Sheets (CSS)

Selektor	Spezifität
`p { color: black; }`	0, 0, 1
`section p { color: orange; }`	0, 0, 2
`section > p { color: orange; }`	0, 0, 2
`p.warning { color: red; }`	0, 1, 1
`p[id*='this'] {color: green; }`	0, 1, 1
`#main { color: yellow; }`	1, 0, 0
`* { color: yellow !important; }`	0, 0, 0 (Important)

div p	alle `<p>` Nachfahren von `<div>` Elementen
.important p	alle `<p>` Nachfahren von .important Elementen

Cascading Style Sheets (CSS)

Einführung

CSS - Cascading Style Sheets

CSS - Historie

Grundlagen

Verknüpfung von CSS und HTML

Selektoren

Übersicht über Selektoren

Class-Selectors - Beispiel[2]

Attribute-Selectors[3]

Attribute-Selectors - Beispiel

Kombinatoren

Kombinatoren - Beispiele

Pseudo-class Selektors

Pseudo-class Selektors - Beispiel

Pseudo-class Selektors bzgl. Inputvalidierung

Spezifität von Selektoren

(Probleme bei der) Verwendung von !important[4]

Elemente

Block und Inline Elemente - Beispiel

Vererbung von CSS Eigenschaften

Kaskadierung

CSS und nicht-unterstützte Eigenschaften

:not() - Beispiel

:is() und :where() - Beispiel

:has() - Beispiel

JavaScript und CSS Selektoren

Nesting

Nesting - & Operator

Nesting - Beispiel

Übung - Einbinden von CSS in HTML

Übung - CSS Selektoren

Werte und Einheiten

Grundlagen

CSS - Berechnung von Werten

Grundlegende Formatierung

Box-Modell - Einführung

Darstellung des Box-Modells

Inhalt, der nicht in die umgebende Box passt

Collapsing Block-Axis Margins

Floating

Positioning - relative und absolute

Positioning - fixed und sticky

Flexbox

Responsive Design

Responsive Design - Grundlagen

Media-Queries - Beispielhaft

Media-Queries und CSS Nesting - Beispielhaft

Flexbox - Beispielhaft

Dark and Light Mode

Nicht Behandelte Themen

Übung - Wo Licht ist, ist auch Schatten

Übung - Komplexeres Layout

(Probleme bei der) Verwendung von `!important`[4]

`:not()` - Beispiel

`:is()` und `:where()` - Beispiel

`:has()` - Beispiel

Positioning - `relative` und `absolute`

Positioning - `fixed` und `sticky`