🖥️ Veni. Vidi. sudo rm -rf / vici.

Diese Seite ist nicht editierbar. Sie können den Quelltext sehen, jedoch nicht verändern. Kontaktieren Sie den Administrator, wenn Sie glauben, dass hier ein Fehler vorliegt.
[[..:start|zurück]]
====== CSS – Grundlagen ======

CSS (Cascading Style Sheets) beschreibt die **Darstellung**
von HTML-Inhalten.

CSS legt fest:
  * Farben
  * Schriftarten
  * Abstände
  * Layout
  * Responsives Verhalten

HTML beschreibt **was** etwas ist,  
CSS beschreibt **wie** es aussieht.


---

===== Einbindung von CSS =====

Es gibt drei Möglichkeiten, CSS einzubinden.

^ Methode ^ Beschreibung ^
| extern | separate CSS-Datei |
| intern | `<style>` im `<head>` |
| inline | direkt im HTML-Element |


---

===== Externes CSS (empfohlen) =====

<code html linenums>
<link rel="stylesheet" href="style.css">
</code>

Vorteile:
  * saubere Trennung von Inhalt und Design
  * wiederverwendbar
  * wartbar

---

===== Internes CSS =====


<code html linenums>
<style>
  body {
    background-color: white;
  }
</style>
</code>

Geeignet für:
  * kleine Tests
  * Einzelseiten


---

===== Inline-CSS =====

<code html linenums>
<p style="color:red;">Text</p>
</code>

⚠️ Nicht empfohlen:
  * schwer wartbar
  * überschreibt andere Regeln


---

===== CSS-Syntax =====

<code css linenums>
selektor {
  eigenschaft: wert;
}
</code>

Beispiel:

<code css linenums>
p {
  color: black;
  font-size: 16px;
}
</code>

---

===== Selektoren (Grundlagen) =====


^ Selektor ^ Bedeutung ^
| `p` | Element |
| `.klasse` | Klasse |
| `#id` | ID |
| `*` | alle Elemente |


---

===== Klassen und IDs =====

<code html linenums>
<p class="info">Text</p>
<p id="hinweis">Text</p>
</code>
<code css linenums>
.info {
  color: blue;
}

#hinweis {
  color: red;
}
</code>

Regeln:
  * Klassen sind wiederverwendbar
  * IDs sind eindeutig


---

===== Kaskade und Priorität =====

CSS folgt einer klaren Priorität:

  * Inline-CSS
  * ID-Selektoren
  * Klassen
  * Element-Selektoren


Spätere Regeln überschreiben frühere,
wenn die Spezifität gleich ist.


---

===== !important =====


<code css linenums>
p {
  color: red !important;
}
</code>

⚠️ Nur im Ausnahmefall verwenden.
Ein Zeichen für strukturelle Probleme.


---

===== Kommentare =====

<code css linenums>
/* Kommentar */
</code>

---

===== Best Practices =====

  * externes CSS verwenden
  * klare Klassennamen
  * keine IDs für Styling missbrauchen
  * Layout nicht mit Farbe verwechseln


---

===== Merksatz =====

> CSS ist mächtig,
>
> aber nur so gut wie die HTML-Struktur darunter.