Grundlagen CSS
Hier ist dein **MediaWiki-Artikel zu CSS**, im gleichen Stil wie deine HTML-Seite aufgebaut 👇
---
CSS (Cascading Style Sheets) ist die Gestaltungssprache des Webs. Mit CSS wird das Aussehen und das Layout einer Webseite festgelegt, z. B. Farben, Schriftarten, Abstände oder Positionierungen.
CSS ist keine Programmiersprache, sondern eine Stylesheet-Sprache.
Historie von CSS
CSS wurde Mitte der 1990er-Jahre entwickelt, um die Gestaltung von Webseiten von der Struktur (HTML) zu trennen.
Die erste offizielle Version, CSS1, erschien 1996. Ziel war es, das Design zentral zu definieren, anstatt Formatierungen direkt im HTML-Code vorzunehmen.
Wichtige Meilensteine sind:
- CSS1 (1996) – grundlegende Formatierungen
- CSS2 (1998) – Positionierung und Layout
- CSS3 – modulare Weiterentwicklung mit Animationen, Flexbox, Grid u. v. m.
Heute wird CSS kontinuierlich als modularer Standard weiterentwickelt.
Aufgabe von CSS
CSS beschreibt:
- wie Inhalte dargestellt werden
- Farben, Schriftarten und Größen
- Abstände und Positionen
- Layout-Strukturen
CSS legt nicht fest:
- den Inhalt (→ HTML)
- die Logik oder Interaktivität (→ JavaScript)
Grundprinzip
CSS besteht aus Selektoren und Deklarationen.
Beispiel:
p {
color: red;
font-size: 18px;
}
p→ Selektor (wählt alle Absatz-Elemente)color→ Eigenschaftred→ Wert
Einbindung von CSS
CSS kann auf drei Arten eingebunden werden:
1. Inline-CSS
Direkt im HTML-Element:
<p style="color: red;">Text</p>
2. Internes Stylesheet
Im <head>-Bereich:
<style>
p { color: red; }
</style>
3. Externes Stylesheet
Empfohlene Methode:
<link rel="stylesheet" href="style.css">
Datei style.css:
p { color: red; }
Wichtige CSS-Eigenschaften
| | | | - | -------------------------------------- | | | Textfarbe | | | | | | Hintergrundfarbe | | | | | | Schriftgröße | | | | | | Außenabstand | | | | | | Innenabstand | | | | | | Rahmen | | | | | | Anzeigeart (block, inline, flex, grid) | | | |
Das Kaskaden-PrinzipCSS steht für Cascading Style Sheets. Das bedeutet:
Beispiel: p { color: blue; }
#info { color: red; }
Das Element mit der ID CSS und HTMLHTML und CSS arbeiten zusammen:
Beispiel: <p class="wichtig">Achtung!</p>
.wichtig {
color: red;
font-weight: bold;
}
Typische Einsatzgebiete
KurzmerksatzCSS bestimmt das Aussehen einer Webseite, nicht ihren Inhalt und nicht ihr Verhalten. |
