Auswahl-Challenge

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

Aufgabe

Einfach

Dir wird ein HTML-Dokument mit verschiedenen Elementen gegeben, darunter Überschriften (<h1>, <h2>), Absätze (<p>), ein Bereich (<div>) und eine ungeordnete Liste (<ul>) mit Listenelementen (<li>). Deine Aufgabe ist es, verschiedene Selektortypen zu verwenden, um diese Elemente zu gestalten. Befolge die folgenden Schritte:

Schreibe eine CSS-Regel mit einem Typselektor, die auf alle <p>-Elemente angewendet wird. Lege die Textfarbe auf Blau und die Schriftgröße auf 16 Pixel fest.
Füge dem <h2>-Element und dem <div>-Element ein class-Attribut mit dem Wert "highlight" hinzu.
Schreibe eine CSS-Regel mit einem Klassen-Selektor, die auf alle Elemente mit der Klasse "highlight" angewendet wird. Lege die Hintergrundfarbe auf Gelb fest.
Füge dem <ul>-Element ein id-Attribut mit dem Wert "special" hinzu.
Schreibe eine CSS-Regel mit einem ID-Selektor, die auf das Element mit der ID "special" angewendet wird. Lege die Hintergrundfarbe auf lightgray und die Schriftgröße auf 20 Pixel fest.
Schreibe eine CSS-Regel mit einem Gruppen-Selektor, die auf alle <h1>- und <li>-Elemente angewendet wird. Lege die Textfarbe auf Rot fest.

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>