Menu
Coddy logo textTech

CSS-Syntax

Teil des Abschnitts Styling with CSS der HTML-Journey von Coddy — Lektion 2 von 76.

In CSS bezieht sich die Syntax auf die Regeln, die festlegen, wie CSS-Code geschrieben werden sollte. Das Verständnis der CSS-Syntax ist entscheidend für die Erstellung gut strukturierter und funktionaler Stylesheets. Eine grundlegende CSS-Regel besteht aus einem Selektor und einem Deklarationsblock.

Hier ist eine einfache Aufschlüsselung:

  • Selektor: Gibt das HTML-Element an, das Sie formatieren möchten (z. B. p, div, img).
  • Deklarationsblock: Enthält eine oder mehrere Deklarationen, die in geschweifte Klammern {} eingeschlossen sind.
  • Deklaration: Besteht aus einer Eigenschaft und einem Wert, getrennt durch einen Doppelpunkt : (z. B. color:green;). Jede Deklaration sollte mit einem Semikolon (;) abgeschlossen werden.
  • Eigenschaft: Das Style-Attribut, das Sie ändern möchten (z. B. color, font-size).
  • Wert: Der Wert, den Sie für die Eigenschaft festlegen möchten (z. B. blue, 16px).

Zum Beispiel:

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

In diesem Beispiel ist p der Selektor, der auf alle Absatzelemente abzielt. Der Deklarationsblock enthält zwei Deklarationen: eine, die die Textfarbe auf Blau setzt, und die andere, die die Schriftgröße auf 16 Pixel festlegt.

challenge icon

Aufgabe

Einfach

Dir wird ein HTML-Code mit einem Absatzelement und einer CSS-Regel für diesen Absatz gegeben. Ändere die CSS-Regel, um die Textfarbe in red zu ändern.

Spickzettel

Die CSS-Syntax besteht aus einem Selektor und einem Deklarationsblock:

  • Selektor: Gibt das HTML-Element an, das gestaltet werden soll (z. B. p, div, img)
  • Deklarationsblock: Enthält Deklarationen, die in geschweifte Klammern {} eingeschlossen sind
  • Deklaration: Eigenschaft und Wert, getrennt durch einen Doppelpunkt :, abgeschlossen mit einem Semikolon ;
  • Eigenschaft: Das zu ändernde Stilattribut (z. B. color, font-size)
  • Wert: Der Wert für die Eigenschaft (z. B. blue, 16px)
p {
    color: blue;
    font-size: 16px;
}

Probier es selbst

<html>
  <head>
    <style>
      p {
        color: blue;
      }
    </style>
  </head>
  <body>
    <p>This is a paragraph.</p>
  </body>
</html>
quiz iconTeste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.

Alle Lektionen in Styling with CSS