復習チャレンジ #1

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

チャレンジ

簡単

この最初の復習チャレンジでは、CSSのテキストスタイリングプロパティの知識を応用して、特定のデザインを再現します。このチャレンジでは、color、font-family、font-size、font-weight、text-align、text-decorationといった様々なテキストプロパティを組み合わせる能力が試されます。

様々な要素が含まれるHTMLドキュメントが与えられます。あなたのタスクは、このセクションで学んだ様々なプロパティを適用して、これらの要素をスタイリングすることです。以下の手順に従ってください。

すべての <h1> 要素をターゲットにするCSSルールを記述してください。
- colorを dark blue に設定します。
- font-sizeを 32px に設定します。
- font-weightを bold に設定します。
- text-alignを center に設定します。
クラス intro-text を持つすべての要素をターゲットにするCSSルールを記述してください。
- colorを gray に設定します。
- font-familyを Arial, Helvetica, sans-serif; に設定します。
- font-sizeを 18px に設定します。
すべての <li> 要素をターゲットにするCSSルールを記述してください。
- font-weightを 600 に設定します。
すべての <a> 要素をターゲットにするCSSルールを記述してください。
- text-decorationを none に設定します。
- font-familyを "Times New Roman", Times, serif に設定します。

自分で試してみよう

<html>
<head>
    <title>Recap Challenge #1</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>Discovering the Ocean</h1>
    <p class="intro-text">The ocean covers 70% of the Earth's surface and is full of life. It also helps regulate the planet's climate.</p>
    <h2>Marine Life</h2>
    <ul>
        <li>Whales</li>
        <li>Octopuses</li>
        <li>Coral Reefs</li>
    </ul>
    <p>Learn more at <a href="https://www.oceans.org" target="_blank">The Ocean Conservation Society</a>.</p>
</body>
</html>