Einführung in Selektoren

Teil des Abschnitts Styling mit CSS der HTML-Journey von Coddy. Lektion 10 von 76.

In CSS sind Selektoren Muster, die verwendet werden, um die HTML-Elemente auszuwählen, die Sie formatieren möchten. Sie sind ein entscheidender Teil von CSS-Regeln, da sie bestimmen, auf welche Elemente die Stile angewendet werden.

Es gibt verschiedene Arten von Selektoren, von denen jeder Elemente auf unterschiedliche Weise anspricht. Das Verständnis von Selektoren ist grundlegend für die Beherrschung von CSS und die Erstellung gut gestalteter Webseiten.

Hier ist eine grundlegende CSS-Regel mit einem Selektor:

selector {
    property: value;
}

selector: Richtet sich an die HTML-Elemente, die gestaltet werden sollen.
property: Das Stilattribut, das du ändern möchtest (z. B. color, font-size).
value: Der Wert, den du für die Eigenschaft festlegen möchtest (z. B. blue, 16px).

Zum Beispiel:

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

In diesem Beispiel ist p der Selektor, der auf alle Absatzelemente abzielt. Die Deklarationen legen die Textfarbe auf Blau und die Schriftgröße auf 16 Pixel für alle Absätze fest.

Aufgabe

Einfach

Ihnen wird ein HTML-Dokument zur Verfügung gestellt. Verwenden Sie internes CSS, um das Dokument mit den folgenden Eigenschaften zu gestalten:

Setzen Sie die Hintergrundfarbe aller h1-Überschriften auf green.
Setzen Sie die Textfarbe aller h1-Überschriften auf white.
Setzen Sie die Schriftgröße aller Absätze (p) auf 18px.

Ihnen wird ein CSS-Startcode dafür zur Verfügung gestellt.

Probier es selbst

<!DOCTYPE html>
<html>
<head>
    <title>Selectors</title>
    <style>
        h1 {
            
        }
        p {
            
        }
    </style>
</head>
<body>
    <h1>John Doe</h1>
    <p>Web Developer</p>
</body>
</html>