Grundlagen CSS - Versionsgeschichte

Moettke: /* Historie von CSS */

2026-02-18T09:57:48Z

Historie von CSS

← Nächstältere Version		Version vom 18. Februar 2026, 09:57 Uhr
Zeile 6:		Zeile 6:
	== Historie von CSS ==		== Historie von CSS ==

	'''CSS''' wurde Mitte der 1990er-Jahre entwickelt, um die Gestaltung von Webseiten von der Struktur (HTML) zu trennen.		'''CSS''' wurde Mitte der 1990er-Jahre entwickelt, um die Gestaltung von Webseiten von der Struktur ([[Grundlagen HTML\|HTML]]) zu trennen.

	Die erste offizielle Version, '''CSS1''', erschien '''1996'''.		Die erste offizielle Version, '''CSS1''', erschien '''1996'''.

Moettke: /* CSS und HTML */

2026-02-18T09:43:52Z

CSS und HTML

← Nächstältere Version		Version vom 18. Februar 2026, 09:43 Uhr
Zeile 119:		Zeile 119:
	HTML und CSS arbeiten zusammen:		HTML und CSS arbeiten zusammen:

	* '''HTML''' → Struktur und Inhalt		* '''[[Grundlagen HTML\|HTML]]''' → Struktur und Inhalt
	* '''CSS''' → Gestaltung und Layout		* '''CSS''' → Gestaltung und Layout

Moettke: /* Aufgabe von CSS */

2026-02-18T09:42:33Z

Aufgabe von CSS

← Nächstältere Version		Version vom 18. Februar 2026, 09:42 Uhr
Zeile 29:		Zeile 29:
	CSS legt '''nicht''' fest:		CSS legt '''nicht''' fest:

	* den Inhalt (→ HTML)		* den Inhalt (→ [[Grundlagen HTML\|HTML]])
	* die Logik oder Interaktivität (→ JavaScript)		* die Logik oder Interaktivität (→ JavaScript)

Moettke am 18. Februar 2026 um 09:42 Uhr

2026-02-18T09:42:07Z

← Nächstältere Version		Version vom 18. Februar 2026, 09:42 Uhr
Zeile 80:		Zeile 80:
	</syntaxhighlight>		</syntaxhighlight>

	~~== Wichtige CSS-Eigenschaften ==~~
	== Wichtige CSS-Eigenschaften ==		== Wichtige CSS-Eigenschaften ==
	{\| class="wikitable" style="width:100%; text-align:center;"		{\| class="wikitable" style="width:100%; text-align:center;"

Moettke am 18. Februar 2026 um 09:41 Uhr

2026-02-18T09:41:37Z

← Nächstältere Version		Version vom 18. Februar 2026, 09:41 Uhr
Zeile 80:		Zeile 80:
	</syntaxhighlight>		</syntaxhighlight>

			== Wichtige CSS-Eigenschaften ==
	== Wichtige CSS-Eigenschaften ==		== Wichtige CSS-Eigenschaften ==
	{\| class="wikitable" style="width:100%; text-align:center;"		{\| class="wikitable" style="width:100%; text-align:center;"
			! Eigenschaft !! Bedeutung
	\| ! Eigenschaft !! Bedeutung ~~\| \| \|~~		\|-
	\| -~~------------------------- \| - \| -------------------------------------- \|~~		\| color \|\| Textfarbe
	\| color \| \| Textfarbe \|		\|-
	\| - ~~\| \| \|~~		\| background-color \|\| Hintergrundfarbe
	\| background-color \| \| Hintergrundfarbe \|		\|-
	\| - ~~\| \| \|~~		\| font-size \|\| Schriftgröße
	\| font-size \| \| Schriftgröße \|		\|-
	\| - ~~\| \| \|~~		\| margin \|\| Außenabstand
	\| margin \| \| Außenabstand \|		\|-
	\| - ~~\| \| \|~~		\| padding \|\| Innenabstand
	\| padding \| \| Innenabstand \|		\|-
	\| - ~~\| \| \|~~		\| border \|\| Rahmen
	\| border \| \| Rahmen \|		\|-
	\| - ~~\| \| \|~~		\| display \|\| Anzeigeart (block, inline, flex, grid)
	\| display \| \| Anzeigeart (block, inline, flex, grid) \|		\|}
	\| } ~~\| \| \|~~

	== Das Kaskaden-Prinzip ==		== Das Kaskaden-Prinzip ==

Moettke am 18. Februar 2026 um 09:40 Uhr

2026-02-18T09:40:12Z

← Nächstältere Version		Version vom 18. Februar 2026, 09:40 Uhr
Zeile 1:		Zeile 1:
	~~Hier ist dein MediaWiki-Artikel zu CSS, im gleichen Stil wie deine HTML-Seite aufgebaut 👇~~

	~~---~~

	'''CSS (Cascading Style Sheets)''' ist die '''Gestaltungssprache des Webs'''.		'''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.		Mit CSS wird das '''Aussehen''' und das '''Layout''' einer Webseite festgelegt, z. B. Farben, Schriftarten, Abstände oder Positionierungen.

Moettke: Die Seite wurde neu angelegt: „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…“

2026-02-18T09:40:01Z

Die Seite wurde neu angelegt: „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…“

Neue Seite

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:

<syntaxhighlight lang="css">
p {
color: red;
font-size: 18px;
}
</syntaxhighlight>

* <code>p</code> → Selektor (wählt alle Absatz-Elemente)
* <code>color</code> → Eigenschaft
* <code>red</code> → Wert

== Einbindung von CSS ==
CSS kann auf drei Arten eingebunden werden:

=== 1. Inline-CSS ===
Direkt im HTML-Element:

<syntaxhighlight lang="html">
<p style="color: red;">Text</p>
</syntaxhighlight>

=== 2. Internes Stylesheet ===
Im <code><nowiki><head></nowiki></code>-Bereich:

<syntaxhighlight lang="html">
<style>
p { color: red; }
</style>
</syntaxhighlight>

=== 3. Externes Stylesheet ===
Empfohlene Methode:

<syntaxhighlight lang="html">
<link rel="stylesheet" href="style.css">
</syntaxhighlight>

Datei <code>style.css</code>:

<syntaxhighlight lang="css">
p { color: red; }
</syntaxhighlight>

== Wichtige CSS-Eigenschaften ==
{| class="wikitable" style="width:100%; text-align:center;"

| ! 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:

<syntaxhighlight lang="css">
p { color: blue; }
#info { color: red; }
</syntaxhighlight>

Das Element mit der ID <code>info</code> wird rot dargestellt.

== CSS und HTML ==
HTML und CSS arbeiten zusammen:

* '''HTML''' → Struktur und Inhalt
* '''CSS''' → Gestaltung und Layout

Beispiel:

<syntaxhighlight lang="html">
<p class="wichtig">Achtung!</p>
</syntaxhighlight>

<syntaxhighlight lang="css">
.wichtig {
color: red;
font-weight: bold;
}
</syntaxhighlight>

== 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.'''