CSS Syntax

CSS Syntax: Die CSS Syntax bestimmt, wie Styles auf HTML-Elemente angewendet werden. Die grundlegende Struktur in CSS besteht aus einem Selektor, der das Ziel-HTML-Element beschreibt, und einem Deklarationsblock, der die Eigenschaften und Werte festlegt, die auf das Element angewendet werden sollen. Jede Deklaration besteht aus einer CSS-Eigenschaft und einem zugehörigen Wert.

Grundlegender Aufbau einer CSS-Regel

Ein einfaches CSS-Regelset sieht wie folgt aus:

h1 {
    color: blue;
    text-align: center;
}

Komponenten einer CSS-Regel

• Selektor (h1): Wählt die HTML-Elemente aus, auf die die Regel angewendet wird. In diesem Fall werden alle <h1>-Elemente angesprochen.
• Deklarationsblock ({ color: blue; text-align: center; }): Umfasst die Deklarationen, die festlegen, wie das Element gestylt werden soll.
• Deklaration: Setzt sich aus einer Eigenschaft (z. B. color) und einem Wert (blue) zusammen. Jede Deklaration wird durch ein Semikolon (;) abgeschlossen.

Mehrere Deklarationen in einem Block

Sie können mehrere Deklarationen innerhalb eines Blocks definieren. Jede Deklaration besteht aus einer CSS-Eigenschaft und einem Wert, der durch einen Doppelpunkt getrennt wird.

p {
    font-size: 16px;
    line-height: 1.5;
    color: #333;
}

In diesem Beispiel hat das <p>-Element drei verschiedene Stilregeln: eine Schriftgröße, einen Zeilenabstand und eine Textfarbe.

CSS Selektoren

Selektoren definieren, auf welche HTML-Elemente ein Stil angewendet wird. Die gebräuchlichsten Selektoren sind:

• Element-Selektor: Wendet Stilregeln auf alle Vorkommen eines HTML-Tags an. h1 { color: red; }
• ID-Selektor: Wendet Stilregeln auf ein Element mit einer bestimmten ID an, eingeleitet durch #. #header { background-color: lightblue; }
• Klassen-Selektor: Wendet Stilregeln auf Elemente einer bestimmten Klasse an, eingeleitet durch .. .text-center { text-align: center; }
• Gruppen-Selektor: Wendet dieselbe Stilregel auf mehrere Elemente an, getrennt durch Kommas.
  css h1, h2, h3 { color: green; }

Verschachtelte CSS-Regeln (Nesting)

CSS unterstützt das direkte Verschachteln von Regeln nicht, aber Sie können verschachtelte Selektoren verwenden, um gezielt auf untergeordnete Elemente abzuzielen.

nav ul {
    list-style-type: none;
}

nav ul li {
    display: inline;
}

Hier wird der Stil auf alle <ul>-Elemente innerhalb eines <nav>-Elements angewendet.

CSS Kommentare

Kommentare können in CSS mit /* Kommentartext */ eingefügt werden und werden vom Browser ignoriert. Sie sind nützlich, um den Code zu dokumentieren oder zu organisieren.

/* Farbe für alle Hauptüberschriften */
h1 {
    color: darkblue;
}

Häufig gestellte Fragen