Grundlagen CSS
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
| Eigenschaft | Bedeutung |
|---|---|
| color | Textfarbe |
| background-color | Hintergrundfarbe |
| font-size | Schriftgröße |
| margin | Außenabstand |
| padding | Innenabstand |
| border | Rahmen |
| display | Anzeigeart (block, inline, flex, grid) |
Das Kaskaden-Prinzip
CSS steht für Cascading Style Sheets. Das bedeutet:
- mehrere Regeln können auf ein Element wirken
- die spezifischere Regel gewinnt
- spätere Regeln können frühere überschreiben
Beispiel:
p { color: blue; }
#info { color: red; }
Das Element mit der ID info wird rot dargestellt.
CSS und HTML
HTML und CSS arbeiten zusammen:
- HTML → Struktur und Inhalt
- CSS → Gestaltung und Layout
Beispiel:
<p class="wichtig">Achtung!</p>
.wichtig {
color: red;
font-weight: bold;
}
Typische Einsatzgebiete
- Gestaltung von Webseiten
- Responsive Design (Anpassung an Smartphones)
- Animationen und Effekte
- Layout-Systeme (Flexbox, Grid)
Kurzmerksatz
CSS bestimmt das Aussehen einer Webseite, nicht ihren Inhalt und nicht ihr Verhalten.
