CSS, auch Cascading Style Sheets genannt, ist eine Sprache zur Beschreibung des Aussehens von HTML Dokumenten. Mit CSS kannst du Farben, Schriftarten, Layouts und andere visuelle Elemente von Webseiten steuern.

Geschichte von CSS

Box Model

Basics

Typografie

Farben

Layout

Libraries / Frameworks

CSS Regeln

Eine CSS Regel legt fest, welche Eigenschaften auf ausgewählte HTML-Elemente auf deiner Website angewandt werden.

Hier werden z.B. auf alle <p> Elemente bestimmte Eigenschaften wie z.B. color: red angewandt:

p {
	color: red;
	font-size: 10px;
	border: 1px solid red;
}

Eine CSS-Regel besteht aus einem Selektor (in diesem Fall p) und einem Block von Eigenschaften und Werten. Der Selektor identifiziert das Element oder die Elemente, auf die die Regel angewendet wird, während der Block die Eigenschaften und Werte enthält, die auf das Element angewendet werden.

Warum “Cascading” Style Sheets?

Die Kaskade bezieht sich auf die Art und Weise, wie CSS-Regeln auf ein Dokument angewendet werden. Wenn mehrere CSS-Regeln auf dasselbe Element angewendet werden, wird die "Kaskade" verwendet, um zu bestimmen, welche Regel anwendbar ist und welche nicht. Die Kaskade wird auch verwendet, um zu bestimmen, welche Regeln Priorität haben, wenn sie in Konflikt stehen.

  1. Reihenfolge (Cascade) Das Grundprinzip von CSS ist, dass CSS Regeln in der Reihenfolge angewendet werden, in der sie im Dokument erscheinen. Wenn mehrere CSS-Regeln auf dasselbe Element angewendet werden, wird die zuletzt definierte Regel angewendet. Das bedeutet, dass spätere Regeln frühere Regeln überschreiben können.
  2. Spezifität (Specificity) Wenn mehrere CSS-Regeln denselben Selektor aufweisen, wird die Regel mit der höchsten Spezifität angewendet. Die Spezifität wird durch die Anzahl der Elementnamen, Klassen und IDs im Selektor bestimmt. Eine Regel, die eine ID enthält, hat beispielsweise eine höhere Spezifität als eine Regel, die nur einen Elementnamen enthält.
  3. Vererbung (Origin) CSS-Eigenschaften werden normalerweise von einem Element auf seine Kinder vererbt. Das bedeutet, dass Sie eine Eigenschaft nur auf einem Elternelement festlegen müssen, und sie wird auf alle seine Kinder angewendet.
  4. Wichtigkeit (Importance) Eine Regel, die mit dem !important-Flag markiert ist, hat Vorrang vor allen anderen Regeln, unabhängig von ihrer Spezifität oder ihrer Position in der Kaskade. Es wird jedoch empfohlen, das !important-Flag nur in Ausnahmefällen zu verwenden, da es schwer zu überschreiben ist und zu unerwünschten Ergebnissen führen kann.

Reset-Stylesheets