Wiederholungs-Challenge #1

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

Aufgabe

Einfach

Nachdem du verschiedene Techniken zum Gestalten von Texten und Hintergründen mit CSS beherrschst, ist es an der Zeit, dein Wissen mit einer umfassenden Herausforderung auf die Probe zu stellen. Du wirst das Gelernte über Farben, Hex-Codes, RGB-Werte und Transparenz mit RGBA anwenden, um ein bestimmtes Design zu erstellen.

Dir wird ein HTML-Dokument mit einer Überschrift (<h1>), einem Absatz (<p>) und einem Bereich (<div>) gegeben. Deine Aufgabe besteht darin, die Text- und Hintergrund-Styling-Eigenschaften, die du kennengelernt hast, zu verwenden, um diese Elemente so zu gestalten, dass sie dem unten im Bild gezeigten Design entsprechen:

Befolge die folgenden Schritte:

Schreibe eine CSS-Regel, die auf das Element <h1> abzielt. Setze color auf white, background-color auf #000080 (Marineblau) und text-align auf center.
Schreibe eine CSS-Regel, die auf das Element <p> abzielt. Setze color auf #FFFFFF (weiß), background-color auf rgba(0, 0, 0, 0.5) (halbtransparentes Schwarz) und font-size auf 18px.
Schreibe eine CSS-Regel, die auf das Element <div> abzielt. Setze background-color auf rgba(237, 170, 26, 1) (Goldgelb) und color auf white.

Probier es selbst

<html>
<head>
    <title>Recap Challenge #1</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <div>This is a division.</div>
</body>
</html>