feat(web-engineering-i): added content for overview (CSS-Slides)

src/content/dhbw/de/web-engineering-i.mdx

@@ -141,3 +141,24 @@ Alle vorgestellten Style's in Bezug auf Abstände werden mit der neueren "Inline
 
 <Card to="/slides/css/01-basic-styles" color="blue">Zu den Slides</Card>
 
+### # CSS - Mehr zu Selektoren
+
+Neben den _einfachen_ Selektoren `.`, `#`, der Element-Syntax und der Selektor für weitere Attribute (z.B. `[data-custom="match"]` ), können wir auch deutlich kompliziertere Selektionen erreichen.
+Diese sind auch immer wieder notwendig, insbesondere bei großen Projekten mit vielen Elementen und der Möglichkeit das Styles "spillen" (sich also auf Elemente auswirken, bei denen wir das nicht beabsichtig haben.)
+
+<Card to="/slides/css/02-selectors-advanced" color="blue">Zu den Slides</Card>
+
+### # CSS - Layout-Techniken und das Box-Model
+
+Wie wir Texte "schön" machen, Farben verwenden und Abstände zwischen Elementen definieren Wissen wir nun.
+Nun beschäftigen wir uns mit etwas, mit dem wir schon öfters Berührung hatten es aber nicht näher angeschaut haben: Das CSS Box-Model. Dieses bietet die Grundlage zum verstehen wie Layouting in HTML und CSS überhaupt funktioniert.
+Als darauffolgende Inhalte werden wir uns mit den verschiedenen Layouting-Systemen in CSS auseinander setzten. Dabei schauen wir uns besonders die CSS-Flexbox und das CSS-Grid genauer an.
+
+<Card to="/slides/css/03-layout-and-box-model" color="blue">Zu den Slides</Card>
+
+### # CSS - Mehr Styles (aber nun "Fancy")
+
+Alles für das tägliche arbeiten mit CSS haben wir nun gelernt: Wir können einfache Styles auf Elemente anwenden und auch erste Layouts generieren um Inhalte auf der Website zu strukturieren.
+In den folgende Slides schauen wir uns nun weitere Möglichkeiten an, Inhalte "hervorstechen zu lassen".
+
+<Card to="/slides/css/04-advanced-styles" color="blue">Zu den Slides</Card>