復習チャレンジ #1

CoddyのHTMLジャーニー「Styling with CSS」セクションの一部 — レッスン 29/76。

チャレンジ

簡単

CSSを使用してテキストや背景をスタイリングするさまざまなテクニックを習得したところで、これまでの知識を総合的なチャレンジで試してみましょう。色、16進数コード、RGB値、そしてRGBAによる透明度について学んだことを応用して、特定のデザインを作成します。

見出し（<h1>）、段落（<p>）、およびディビジョン（<div>）が含まれるHTMLドキュメントが用意されています。あなたのタスクは、学んだテキストと背景のスタイリングプロパティを使用して、以下の画像に示されているデザインに一致するようにこれらの要素をスタイリングすることです。

以下の手順に従ってください：

<h1>要素をターゲットにするCSSルールを記述します。colorをwhiteに、background-colorを#000080（ネイビーブルー）に、そしてtext-alignをcenterに設定します。
<p>要素をターゲットにするCSSルールを記述します。colorを#FFFFFF（白）に、background-colorをrgba(0, 0, 0, 0.5)（半透明の黒）に、そしてfont-sizeを18pxに設定します。
<div>要素をターゲットにするCSSルールを記述します。background-colorをrgba(237, 170, 26, 1)（ゴールデンイエロー）に、そしてcolorをwhiteに設定します。

自分で試してみよう

<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>