Selektions-Herausforderung

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

Aufgabe

Einfach

Sie erhalten ein HTML-Dokument mit verschiedenen Elementen, darunter Überschriften (<h1>, <h2>), Absätze (<p>), ein Bereich (<div>) und eine ungeordnete Liste (<ul>) mit Listenelementen (<li>). Ihre Aufgabe ist es, verschiedene Arten von Selektoren zu verwenden, um diese Elemente zu gestalten. Befolgen Sie die folgenden Schritte:

Schreiben Sie eine CSS-Regel unter Verwendung eines type selector, die auf alle <p>-Elemente abzielt. Setzen Sie die Textfarbe auf blue und die Schriftgröße auf 16 pixels.
Fügen Sie dem <h2>-Element und dem <div>-Element ein class-Attribut mit dem Wert "highlight" hinzu.
Schreiben Sie eine CSS-Regel unter Verwendung eines class selector, die auf alle Elemente mit der Klasse "highlight" abzielt. Setzen Sie die Hintergrundfarbe auf yellow.
Fügen Sie dem <ul>-Element ein id-Attribut mit dem Wert "special" hinzu.
Schreiben Sie eine CSS-Regel unter Verwendung eines ID selector, die auf das Element mit der ID "special" abzielt. Setzen Sie die Hintergrundfarbe auf lightgray und die Schriftgröße auf 20 pixels.
Schreiben Sie eine CSS-Regel unter Verwendung eines group selector, die auf alle <h1>- und <li>-Elemente abzielt. Setzen Sie die Textfarbe auf red.

Probier es selbst

<html>
<head>
    <title>Selection Challenge</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>
    <p>This is another paragraph.</p>
    <div>This is a division.</div>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</body>
</html>