Typselektor

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

Der Typ-Selektor, auch bekannt als Element-Selektor oder Tag-Selektor, spricht HTML-Elemente basierend auf ihren Tag-Namen an. Er ist einer der einfachsten und grundlegendsten Selektoren in CSS.

Hier ist die grundlegende Syntax für die Verwendung eines Typ-Selektors:

tagname {
    property: value;
}

tagname: Der Name des HTML-Tags, den du gestalten möchtest (z. B. p, h1, div).
property: Die CSS-Eigenschaft, die du festlegen 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 spricht der Typ-Selektor p alle <p> (Absatz-)Elemente im HTML-Dokument an. Die Deklarationen legen die Textfarbe auf Blau und die Schriftgröße auf 16 Pixel für alle Absätze fest.

Aufgabe

Einfach

Dir liegt ein HTML-Dokument mit verschiedenen Elementen vor, darunter Überschriften (<h1>, <h2>), Absätze (<p>) und Bereiche (<div>). Deine Aufgabe besteht darin, diese Elemente mithilfe von Typselektoren zu formatieren. Befolge die folgenden Schritte:

Schreibe eine CSS-Regel, die auf alle <h1>-Elemente abzielt. Setze die Textfarbe der <h1>-Überschriften auf darkred.
Schreibe eine CSS-Regel, die auf alle <h2>-Elemente abzielt. Setze die Textfarbe der <h2>-Überschriften auf green.
Schreibe eine CSS-Regel, die auf alle <p>-Elemente abzielt. Setze die Textfarbe der Absätze auf blue und die Schriftgröße auf 18 Pixel.
Schreibe eine CSS-Regel, die auf alle <div>-Elemente abzielt. Setze die Hintergrundfarbe der Bereiche auf lightblue.

Probier es selbst

<html>
<head>
    <title>Type Selector</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a main heading</h1>
    <h2>This is a subheading</h2>
    <p>This is a paragraph.</p>
    <div>This is a division.</div>
</body>
</html>