Wiederholungs-Challenge #1

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

Aufgabe

Einfach

Nachdem Sie nun verschiedene Techniken zum Stylen von Text und Hintergründen mit CSS gemeistert haben, ist es an der Zeit, Ihr Wissen mit einer umfassenden Herausforderung auf die Probe zu stellen. Sie werden das Gelernte über Farben, Hex-Codes, RGB-Werte und Transparenz mit RGBA anwenden, um ein spezifisches Design zu erstellen.

Ihnen wird ein HTML-Dokument mit einer Überschrift (<h1>), einem Absatz (<p>) und einem Bereich (<div>) zur Verfügung gestellt. Ihre Aufgabe ist es, die gelernten Eigenschaften für Text- und Hintergrund-Styling zu verwenden, um diese Elemente so zu gestalten, dass sie dem im Bild unten gezeigten Design entsprechen:

Befolgen Sie die folgenden Schritte:

Schreiben Sie eine CSS-Regel, die auf das <h1>-Element abzielt. Setzen Sie die color auf white, die background-color auf #000080 (Navy-Blau) und das text-align auf center.
Schreiben Sie eine CSS-Regel, die auf das <p>-Element abzielt. Setzen Sie die color auf #FFFFFF (Weiß), die background-color auf rgba(0, 0, 0, 0.5) (halbtransparentes Schwarz) und die font-size auf 18px.
Schreiben Sie eine CSS-Regel, die auf das <div>-Element abzielt. Setzen Sie die background-color auf rgba(237, 170, 26, 1) (Goldgelb) und die 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>