CSS (Cascading Style Sheets) ist eine Stylesheet-Sprache, die verwendet wird, um das Aussehen und Layout von HTML-Dokumenten zu beschreiben. Die Syntax von CSS besteht aus Selektoren, Eigenschaften und Werten.

Grundlegende Struktur

Ein CSS-Regelsatz besteht aus einem Selektor und einer Deklarationsblock. Der Selektor bestimmt, welche HTML-Elemente die Regel anwenden soll, und der Deklarationsblock enthält eine oder mehrere Deklarationen, die die Eigenschaften und Werte festlegen.

selektor {
eigenschaft: wert;
}

Beispiel

Hier ist ein einfaches Beispiel, das die Farbe und Schriftgröße von Absatz-Elementen (<p>) ändert:

p {
color: blue;
font-size: 16px;
}

Selektoren

Selektoren sind ein wesentlicher Bestandteil von CSS. Sie bestimmen, welche HTML-Elemente von den CSS-Regeln betroffen sind. Es gibt verschiedene Arten von Selektoren:

Elementselektoren: Wählen alle Elemente eines bestimmten Typs aus.
h1 {
color: red;
}

Klassenselektoren: Wählen alle Elemente mit einer bestimmten Klasse aus. Klassen werden mit einem Punkt (.) vor dem Klassennamen angegeben.
.beispiel-klasse {
background-color: yellow;
}

ID-Selektoren: Wählen ein einzelnes Element mit einer bestimmten ID aus. IDs werden mit einem Rautezeichen (#) vor dem ID-Namen angegeben.
#beispiel-id {
margin: 20px;
}

Eigenschaften und Werte

CSS-Eigenschaften bestimmen, wie die ausgewählten Elemente dargestellt werden. Jede Eigenschaft hat einen oder mehrere Werte. Hier sind einige häufig verwendete Eigenschaften:
• color: Legt die Textfarbe fest.
• background-color: Legt die Hintergrundfarbe fest.
• font-size: Legt die Schriftgröße fest.
• margin: Legt den Außenabstand fest.
• padding: Legt den Innenabstand fest.

Beispiel für eine vollständige CSS-Datei

Hier ist ein Beispiel für eine vollständige CSS-Datei, die verschiedene Elemente auf einer Webseite stylt:

body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}

h1 {
color: #333;
text-align: center;
}

p {
color: #666;
line-height: 1.6;
}

.beispiel-klasse {
background-color: yellow;
padding: 10px;
}

#beispiel-id {
margin: 20px;
border: 1px solid #ccc;
}