CSS Schnellstart – Syntax: Selektoren, Eigenschaften und Werte

Das Wichtigste, was du bei CSS wissen musst, ist der Aufbau einer CSS-Regel, also die Syntax.

Wenn du einmal verstanden hast, wie man CSS-Regeln lesen und schreiben kann, hast du die Möglichkeit auf Beispiele zurückzugreifen und selber auszuprobieren.

Der Rest ist Fleißarbeit und Erfahrung. CSS bringt sehr viele Eigenschaften mit, dass man gar nicht alle auswendig lernen kann.

Eine CSS Regel besteht aus drei Bestandteilen.

Das ist der Basisaufbau einer CSS-Regel:

Hier ein Beispiel, wir wollen alle p-Elemente mit der Farbe blau gestalten. Dies funktioniert mit einer CSS-Regel:

p {
  color: blue;
}

Das p ist der Selektor. Mit dem Selektor wählt man die HTML-Elemente aus, die von der CSS-Regel erfasst werden sollen. Es gibt verschiedene Arten von Selektoren, die du in diesem Modul lernst. In die geschweiften Klammern kommen dann die Eigenschaften und Werte. In diesem Beispiel ändern wir die Eigenschaft color, also Farbe auf den Wert blue, also blau.

Der Doppelpunkt trennt die Eigenschaft vom Wert. CSS weiß damit, dass die Eigenschaft den Wert hinter dem Doppelpunkt erhält.

Das Semikolon zeigt das Ende des Wertes für diese eine Eigenschaft an. Man kann nämlich pro Regel auch mehrere Eigenschaften festlegen. Das wirst du gleich noch sehen.

Es gibt in CSS etliche Eigenschaften zu allen Arten von HTML-Elementen. Ich kann dich direkt beruhigen: Du musst nicht alle auswendig lernen. Du wirst dir automatisch die merken, die du oft nutzen wirst.

In dieser Übung siehst du die CSS-Regel in Aktion. Kannst du den Code finden und anpassen?