add css demos for 223015c chapter 2: selectors, specificity, box-model, colors, pseudo, responsive

slides/223015c/02-netzwerke-protokolle-css.md

@@ -1889,6 +1889,8 @@ HTML definiert die Struktur – was ist auf der Seite. CSS definiert das Aussehe
 **C**ascading **S**tyle **S**heets
 
 ```css
+p {
+    color: blue;
     font-size: 16px;
 }
 ```
@@ -1984,6 +1986,8 @@ Semikolon nach jedem Paar. Doppelpunkt zwischen Property und Value.
 ```css
 /* Alle <p>-Elemente */
 p {
+    color: gray;
+}
 
 /* Mehrere Elemente gleichzeitig */
 h1, h2, h3 {
@@ -2012,6 +2016,8 @@ Komma bedeutet "oder" – h1 oder h2 oder h3.
 ```html
 <p class="wichtig">Dieser Text ist wichtig.</p>
 <p>Dieser nicht.</p>
+```
+
 ```css
 .wichtig {
     color: red;
@@ -2040,6 +2046,8 @@ Eine Klasse kann auf beliebig viele Elemente angewendet werden. Ein Element kann
 ```html
 <nav id="hauptnavigation">...</nav>
 ```
+
+```css
 #hauptnavigation {
     background: #333;
     padding: 1rem;
@@ -2069,6 +2077,8 @@ In der Praxis: Klassen sind meist besser. IDs haben hohe Spezifität und sind un
 ```css
 /* Nachfahre (beliebig tief verschachtelt) */
 article p { line-height: 1.6; }
+
+/* Direktes Kind (nur eine Ebene) */
 nav > a { text-decoration: none; }
 
 /* Nächstes Geschwister */
@@ -2105,6 +2115,8 @@ Element.Klasse: Das Element muss beides sein. "p.wichtig" heißt: nur p-Elemente
 | Selektor | Spezifität |
 |----------|------------|
 | Element (`p`) | 0,0,0,1 |
+| Klasse (`.wichtig`) | 0,0,1,0 |
+| ID (`#header`) | 0,1,0,0 |
 | Inline (`style="..."`) | 1,0,0,0 |
 
 ```css
@@ -2200,6 +2212,8 @@ Margin: Außenabstand. Zwischen diesem Element und anderen.
 ```css
 .box {
     width: 200px;
+    height: 100px;
+    padding: 20px;
     border: 2px solid black;
     margin: 10px;
 }
@@ -2232,6 +2246,8 @@ Best Practice: Setzt das global für alle Elemente.
 ```css
 /* Keyword */
 color: red;
+color: rebeccapurple;
+
 /* Hex */
 color: #FF0000;
 color: #F00;
@@ -2300,6 +2316,8 @@ vw und vh sind Prozent des Viewports. 100vw ist die volle Bildschirmbreite.
 ```css
 /* Hover – Maus drüber */
 a:hover { color: red; }
+
+/* Besuchter Link */
 a:visited { color: purple; }
 
 /* Fokussiertes Element */
@@ -2335,6 +2353,8 @@ Wichtig für interaktive Elemente und Zebra-Streifen in Tabellen.
 ```css
 /* Vor dem Inhalt einfügen */
 .required::before {
+    content: "* ";
+    color: red;
 }
 
 /* Erster Buchstabe */
@@ -2371,6 +2391,8 @@ Doppelpunkt zur Unterscheidung von Pseudo-Klassen – aber einfacher Doppelpunkt
 ```css
 /* Mobile First: Basis-Styles */
 .container {
+    padding: 1rem;
+    background: white;
 }
 
 /* Ab 768px (Tablet): Anpassungen */